如何在angular 2中编译ng-content中的动态模板

我试图通过编写自定义组件/指令来扩展/包装第三方（Angular Material 2）指令。如何在angular 2中编译ng-content中的动态模板

对于一个按钮，

<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-按钮”，我是成功的，但我需要编译得到的材料的外观和全面。如何编译驻留在ng-content中的模板。你能指导我吗？

来源

2017-02-12 Karthik Bammidi

http://stackoverflow.com/questions/34784778/等价的 - 编译 - 在角向-2/37044960＃37044960 –

在继承和组合方面，角度相当有限。我认为，在这种情况下，包裹是一个更好的办法：

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


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

否则，你就必须提供原始模板，样式，等等

来源

2017-02-12 17:52:07 kemsky

如何在angular 2中编译ng-content中的动态模板

回答

相关问题