Question

我正在创建一个模板，如果单击按钮，则附加我想要的元素。我可以使用以下代码完全附加它，但我无法添加样式，angular-material2。如果您有任何想法，请留下您的小费。

请-template.component.ts

SELECT
*
FROM Table
WHERE YEAR(DateColumn) = 2017

}

请-template.component.html

@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>
`]);

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 Method

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相关联的问题，而是一个基本的Angular模式。

我个人会这样做：

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

在你的ts文件中：

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

因此，每次用户点击您都会调用addTbody并且items数组会增长，将您的内容附加到您的dom。

您可以根据需要通过class或ngClass或ngStyle正常添加样式。

如何使用angular material2样式追加元素？

2 个答案: