Question

我正在使用angular 5，我想按需创建组件的新实例。

这是我目前的代码：

app.component.ts：

import { Component } from '@angular/core';
import { MyComponent } from './mycomp/my.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  constructor() {}
  addCmp() {
    console.log('adding');
    // Add an instance of MyComponent code goes here ?
  }
}

app.component.html

<button (click)="addCmp()" >Add New MyComponent below</button>

MyComponent.html：

<div>I am MyComponent</div>

我该怎么做？

Answer 1

这是您自己创建组件的方法：（不要忘记销毁它！在componentRef上调用destroy（）来执行此操作）

父组件：

@ViewChild('componentHolder', { read: ViewContainerRef }) componentHolder: ViewContainerRef;

constructor(private componentFactoryResolver: ComponentFactoryResolver) { }

public createComponent(): void {
          const componentFactory = this.componentFactoryResolver.resolveComponentFactory(MyComponent);
          const componentRef = this.componentHolder.createComponent(componentFactory);
}

父组件HTML：

<button (click)="createComponent()">Add New MyComponent below</button>
<div #componentHolder ></div>

在NgModule中添加MyComponent：

...
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(appRoutes),
  ],
  entryComponents: [
    MyComponent
  ],...

Answer 2

您可以在父组件中使用数组，并在每次单击add按钮时增大数组。在app.component.html中使用ngFor循环来迭代数组，然后使用循环中MyComponent上定义的选择器，这将为每次迭代添加一个新实例。

请记住，你永远不会解释为什么你想要这样做，所以没有数据被传递，没有人可以说明哪种方式是最好的方法，而不知道你想如何交互使用您创建的组件。

app.component.ts：

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  myComponents:any[] = [];

  constructor() {}
  addCmp() {
    console.log('adding');
    this.myComponents.push(null);
  }
}

app.component.html

<button (click)="addCmp()" >Add New MyComponent below</button>
<ng-container *ngFor="let i of myComponents">
  <my-component></my-component>
</ng-container>

Answer 3

也许你应该使用这种方法。我在单元测试中使用它。

let component:MyComponent = new MyComponent();

现在您可以通过组件变量访问MyComponent的属性。

Angular 5添加组件的新实例

3 个答案: