각도 2의 ng-content에서 동적 템플릿을 컴파일하는 방법

사용자 지정 구성 요소/지시문을 작성하여 제 3 자 (각도 재료 2) 지시문을 연장/포장하려고합니다. 버튼의 경우 각도 2의 ng-content에서 동적 템플릿을 컴파일하는 방법

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

대신 직접 내 응용 프로그램의 모든 장소에서 제어 이상 사용하는, 내가 하나 개의 사용자 지정 구성 요소의 내부에 그것을 포장하고 내가 한 장소에서 구성 변경을 할 것이며,이 모든 영향을 미칠 것 다른 곳에서는 사용자 지정 구성 요소가 사용됩니다. 여기 AfterViewInit 후크에

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', '');  
    } 
}

, 내가, 내가 점에서 성공적이었다 'MD-버튼을'요소의 속성을 설정하려고하지만 난 재료의 모양과 전체를 얻기 위해 컴파일해야합니다. ng-content에있는 템플릿을 컴파일하는 방법. 너 나를 인도 해 줄 수 있니?

출처

2017-02-12 Karthik Bammidi

http://stackoverflow.com/questions/34784778/ ...

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

그렇지 않으면 당신이 등 원본 템플릿, 스타일을 제공해야합니다 :이 경우 포장에 더 좋은 방법이라고 생각 등가 컴파일 - 2/37044960 # 37044960 –

상속 및 구성과 관련하여 각도는 매우 제한되어 있습니다.

출처

2017-02-12 17:52:07 kemsky

각도 2의 ng-content에서 동적 템플릿을 컴파일하는 방법

답변

관련 문제