角度5コンポーネントの新しいインスタンスを追加する

Question

私は角度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上でこれを行うには！）

親コンポーネント：

@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

このメソッドを使用する必要があります。私はユニットテストでこれを使用します。

let component:MyComponent = new MyComponent(); 

これで、コンポーネント変数を使用してMyComponentのプロパティにアクセスできます。

Answer 3

親コンポーネントで配列を使用し、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>