在角5

  • Z时代
  • 2024-01-10
  • 分类：问答

让我们创建一个基于字符串动态组件说我有这给了我这样的一个API：在角5

{ 
    title: 'title1', 
    type: 'FullComponent' 
}, 
{ 
    title: 'title2', 
    type: 'HalfComponent' 
}, 
{ 
    title: 'title3', 
    type: 'HalfComponent' 
}, 
{ 
    title: 'title4', 
    type: 'ThirdComponent' 
}, 
{ 
    title: 'title5', 
    type: 'ThirdComponent' 
}, 
{ 
    title: 'title6', 
    type: 'ThirdComponent' 
},

我想基于这些type值动态生成组件。

// app.component.ts 
ngOnInit() { 
    this.getWidget() 
     .subscribe(
     data => { 
     }, 
     error => { 
      ??? 
     } 
    ); 
} 
getWidget() { 
    return this.http.get('www.api.com'); 
}

data返回上面的json。 我该怎么做才能生成这些组件（这些组件已经使用Angular CLI创建，因此它们已经存在）？ 谢谢:)

回答：

我想创建一个组件管理器，它将使FullComponent，HalfComponent或ThirdComponent在输入的功能：

manager.component.html

<ng-container *ngIf="component === 'FullComponent'"> 
    <app-full-component></app-full-component> 
</ng-container> 
<ng-container *ngIf="component === 'HalfComponent'"> 
    <app-half-component></app-half-component> 
</ng-container> 
<ng-container *ngIf="component === 'ThirdComponent'"> 
    <app-third-component></app-third-component> 
</ng-container>

manager.component.ts应该有一个输入：

import { Component, OnInit, Input } from '@angular/core'; 
@Component({ 
selector: 'app-manager', 
templateUrl: './manager.component.html', 
styleUrls: ['./manager.component.css'] 
}) 
export class ManagerComponent implements OnInit { 
    @Input() component: string; 
    constructor() { } 
    ngOnInit() { 
    } 
}

在您的app.component.ts中，您将数据传递给数组：

// app.component.ts 
data: Any[] = []; 
ngOnInit() { 
    this.getWidget() 
     .subscribe(
     data => { 
      this.data = data; 
     }, 
     error => { 
      ??? 
     } 
    ); 
} 
getWidget() { 
    return this.http.get('www.api.com'); 
}

最后，在app.component.html你叫*ngFor它迭代数据，并通过type到管理器组件：

<ng-container *ngFor='let d of data'> 
    <app-manager [component]="d.type"></app-manager> 
</ng-container>

以上是 在角5 的全部内容， 来源链接： utcz.com/qa/263239.html

回到顶部