如何在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中的動態模板

回答

相關問題