如何根据 API 响应在 angular 中生成动态菜单和组件

Question

我想（适当地）根据 API 响应动态生成一些菜单位置和引用这些菜单位置的组件。 对 c# 后端的响应将在 app.component.ts 中的应用程序启动时进行。 这些菜单位置将是处理项目的状态（例如“完成”、“进行中”等），并且每个组件中的 html 看起来几乎相同（只是表格中的位置来自 sql 数据库，它们之间的唯一区别是对 ZAC5C74B64B4B83252EF2 进行查询具有不同“where”子句的数据库）。 现在是两个状态，但将来可能会再增加 7 个，所以我不想每次在后端添加新状态时都在 angular 中创建一个新组件。 那么我应该寻找什么？ 在收到 api 的回复后，我应该在哪里存储这个答案？ （为了始终拥有这些组件，我不希望它们在页面重新加载或其他任何事情后消失）。

Answer 1

When displaying data fetched from an API it's good practice to implement a model controller view pattern where the date is downloaded by the controller (a service), saved in the model which is marked with the @Injectable() decortator and is injected in the view您正在显示数据的组件。 因此，您获取的数据存储在 model 中，并且可以在您需要的任何地方访问。

controller 可能看起来像这样：

@Injectable({
    providedIn: 'root'
})
export class StatusService{
    constructor(private http : HttpClient) 
    { }

    public getStatus() : Observable<any>
    {
        return this.http.get('http://myapi.com/getstatus');    
    }
}

model 只是存储这些数据：

export class Status
{
    public id : number;
    public type: string;
}

@Injectable()
export class StatusModel
{
    public statuses: Status[];

    constructor(private statusService : StatusService) 
    { }

    public getStatus() : Observable<Status[]>
    {
        return this.statusService.getstatus().pipe(map((status: Status[]) => 
        {
            this.statuses = data;
            return this.statuses ;
        }));
    }
}

在您的组件（视图）中，您将在构造函数中注入 StatusModel 并发出 API 请求：

@Component({
    selector: 'app-status',
    templateUrl: './status.component.html',
    styleUrls: ['./status.component.scss'],
})
export class StatusComponent implements OnInit {
    constructor(public statusModel : StatusModel)
    {
        this.getStatus();
    }

public getStatus() : void
    {
        this.statusModel.getStatus().subscribe(
            (data) => 
            {
                console.log(data);
            },
            (error) =>
            {
                console.log(error);
            }
        );
    }
}

在您的 HTML 中，您可以使用*ngFor显示存储在 statusModel.statuses 中的这些状态，如下所示：

<div class="status" *ngFor="let status of statusModel.statuses">
    <p>{{status.id}</p>
    <p>{{status.type}}</p>
</div>

您还可以使用*ngIf以不同的方式显示不同的状态，或者使用ngClass为特定状态设置特定的样式类。