角度material2スタイルの要素を追加するにはどうすればよいですか？

Question

ボタンをクリックして、私がしたい要素を追加するテンプレートを作っています。 次のコードで正確に追加することができましたが、スタイルangle-material2を追加できませんでした。 ご意見がありましたら、お助けください。あなたはそれを追加するために、ここでの動的コンポーネントを使用することができます

メイクtemplate.component.ts

@ViewChild('tContent') content: ElementRef; 

    addTbody() { 
    let content = document.getElementById('tContent'); 
    console.log(this.content.nativeElement); 
    this.renderer.invokeElementMethod(this.content.nativeElement, 'insertAdjacentHTML', [`beforeend`, 
    ` 
    <tr> 
    <td> 
     <input type="file"> 
    </td> 
    <td> 
     <input type="file"> 
    </td> 
    </tr> 
    <tr> 
    <td> 
     <mat-input-container> 
     <input matInput placeholder="image Info" type="text"> 
     </mat-input-container> 
    </td> 
    <td> 
     <mat-input-container> 
     <input matInput placeholder="image Info" type="text"> 
     </mat-input-container> 
    </td> 
    </tr> 
`]); 

}

メイクtemplate.component.html

... 
<tbody #tContent> 
      // add here 
</tbody> 
<button type="button" mat-raised-button color="primary" (click)="addTbody()">click here</button> 

Answer 1

-

constructor(private compiler: Compiler, public vcRef: ViewContainerRef) { } 

    @ViewChild('tContent') 
    tContent: ViewContainerRef; 
    cmpRef: any; 

ngOnInit() { 
    let dom = this.appendDom('<h1>Dynamic Component</h1>'); 
} 

appendDom(template: string) { 
    const html = template; 
     if (!html) return; 

     if (this.cmpRef) { 
      this.cmpRef.destroy(); 
     } 
     const compMetadata = new Component({ 
      template: html 
     }); 

     let factory = this.createComponentFactory(this.compiler, compMetadata); 
     const injector = ReflectiveInjector.fromResolvedProviders([], this.vcRef.parentInjector); 
     this.cmpRef = this.vcRef.createComponent(factory, this.vcRef.length, injector); 
     const hostView = <EmbeddedViewRef<any>>this.cmpRef.hostView; 
     return hostView.rootNodes[0]; 
} 

// createComponentFactory方法

createComponentFactory(compiler: Compiler, metadata: Component) { 
    @Component(metadata) 
    class DynamicComponent { 

    }; 
    @NgModule({ 
     imports: [CommonModule], 
     declarations: [DynamicComponent] 
    }) 
    class DynamicHtmlModule { } 
    let moduleWithComponentFactory = compiler.compileModuleAndAllComponentsSync(DynamicHtmlModule); 
    return moduleWithComponentFactory.componentFactories.find(x => x.componentType === DynamicComponent); 
} 

}

Plunker

Answer 2

私はレンダラと@Viewchildを使用することはありません、これはmaterial2の使用にリンクされている問題ではありませんが、基本的な角度パターンです。

私は個人的にこれを行うだろう

：

items: any[] 
addTbody() { 
    this.items.push('your new item here') 
} 

だから、ユーザーがクリックするたびに、あなたがaddTbody呼び出すとitems配列がにコンテンツを追加し、成長します：

<tbody #tContent> 
    <tr *ngFor="let item of items"> 
     // Your content here 
    </tr> 
</tbody> 

そして、あなたのTSファイルで

あなたのdom。

必要に応じて、classまたはngClassまたはngStyleによって、通常はHTMLにスタイルを追加できます。