Question

我正在开发angular 7应用程序，我有一个要求：

在我的有角度的应用程序中，我有许多组件，例如componentOne，componentTwo，componentThree等。在主组件（Main）中，我有一个数组，例如['componentTwo'，'componentFive']，因此我想遍历该数组并调用相应的组件。

因此，如果我只想调用这些组件，则将放置如下代码：

<div>
   <componentTwo></componentTwo>
   <componentFive></componentFive>
</div>

但是问题是我不知道哪个组件会出现在数组中。那么有什么方法可以动态调用组件？

我尝试过，但是没有用：

<div>
   <ng-container *ngFor="let componentName of componentArray">
      <{{componentName}}></{{componentName}}>
   </ng-container>
</div>

任何帮助都是可以的，谢谢。

Answer 1

您也许可以侦听其他组件的输出并在typecipt文件中处理该事件。请参见下面的代码。我希望这会有所帮助。

main.html

<div (updateComponentArray)="updateComponentArray($event)">

    <ng-container *ngFor="let componentName of componentArray">
        < {{componentName}}></ {{componentName}}>
    </ng-container>

</div>

main.ts

import { Component} from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  componentArray: string[];
  updateComponentArray(components:string[]) {
    this.componentArray = components;
  }

}

Answer 2

您可以使用动态组件。在此示例中，在showErrorAlert函数中动态创建了ErrorDialogComponent。注意使用createComponent和ComponentFactoryResolver。您还可以使用实例来设置动态组件的数据。

import { Component, OnInit, ComponentFactoryResolver, ViewChild, ViewContainerRef } from '@angular/core';
import { first } from 'rxjs/operators';

import { ProductsService } from './products.service';
import { ErrorDialogComponent } from '@app/shared/error-dialog/error-dialog.component';

@Component({
  selector: 'app-products',
  templateUrl: './products.component.html',
  styleUrls: ['./products.component.scss']
})
export class ProductsComponent implements OnInit {

  @ViewChild('errorPlaceHolder', { read: ViewContainerRef, static: false }) errorPlaceHolder: ViewContainerRef;

  constructor(
    private componentFactoryResolver: ComponentFactoryResolver
  ) { }

  async ngOnInit() {
  }

  private showErrorAlert(errorMessage: string) {
    this.showError = true;
    const errorComponentFactory = this.componentFactoryResolver.resolveComponentFactory(ErrorDialogComponent);
    this.errorPlaceHolder.clear();
    const errorCompnent = this.errorPlaceHolder.createComponent(errorComponentFactory);
    errorCompnent.instance.errorMessage = errorMessage;
    errorCompnent.instance.dismiss.subscribe(() => {
      this.errorPlaceHolder.clear();
    });
  }
}

在运行时如何调用角度分量？

2 个答案: