如何在角度 2 中编译 ng 内容中的动态模板

Question

我正在尝试通过编写自定义组件/指令来扩展/包装第三方(Angular Material 2(指令。

对于按钮，

<button type="button" md-button>Some Text</button>

我不是直接在我的应用程序中的所有位置使用上述控件，而是将其包装在一个自定义组件中，我将在一个地方进行配置更改，它将影响使用自定义组件的所有其他地方。

import { MdButton } from '@angular/material';
import {
  AfterViewInit,
  ChangeDetectionStrategy,
  Component,
  ElementRef,
  OnInit,
  Renderer,
  ViewChild,
  ViewEncapsulation
} from '@angular/core';
@Component({
  selector: '[at-button]',
  template: `<ng-content></ng-content>`,
  styleUrls: []
})
export class AtButtonComponent extends MdButton implements OnInit, AfterViewInit {
  // @ViewChild(MdButton)
  // private mdButton:MdButton
  private eleRef: ElementRef;
  private renderRef: Renderer;
  constructor(_renderer: Renderer, _elementRef: ElementRef) {
    super(_elementRef, _renderer);
    this.eleRef = _elementRef;
    this.renderRef = _renderer;
  }
  ngOnInit() {
  }
  ngAfterViewInit(): void {
    this.disableRipple = true;
    this.color = 'warn';
    this.renderRef.setElementAttribute(this.eleRef.nativeElement, 'md-button', '');    
  }
}

在 AfterViewInit 钩子中，我正在尝试设置元素属性"md-button"，我在这方面取得了成功，但我需要编译才能获得材料外观和完整。如何编译驻留在ng内容中的模板。你能指导我吗？

Answer 1

Angular 在继承和组合方面非常有限。我相信在这种情况下包装MdButton是一种更好的方法：

@Component({
  selector: '[at-button]',
  template: `<button type="button" md-button><ng-content></ng-content></button>`,
  styleUrls: []
})

<div at-button>Click Me</div>

否则，您将不得不提供原始模板、样式等...