Angular 2 재질 구성 요소를 동적으로 렌더링

Question

단추에 적용 할 때 단추의 내부 내용에 로더를 추가하는 특성을 갖도록하고 있습니다.

다음 버튼 콘텐츠 로더를 추가 :

var test = this.renderer.createElement(this.el.nativeElement.childNodes[0], 'mat-spinner'); 
this.renderer.appendChild(this.el.nativeElement.childNodes[0], test); 

매트 로딩 소자가 HTML 있지만인가 각 묘화 밤은 렌더링된다. 이것을 추측하는 Im는 약간 각진 복잡함 때문에이다.

누구든지 런타임에이 요소를 올바르게 렌더링하는 방법을 알고 있습니까?

감사합니다.

Answer 1

임 버튼에 적용 할 때, 버튼의 내부 콘텐츠에 대한 로더가

내가 제대로 질문을 이해한다면, 당신은 사용자 정의 버튼을 만드는 것이 좋습니다 수있는 추가한다는 특성을 가지고 노력 요소를 사용하면 새로 만든 회 전자를 DOM에 추가하는 대신 @Input을 통해이 사용자 지정 단추 구성 요소에 전달하는 특성을 기반으로 mat-spinner을 단순히 숨기거나 표시합니다.

예를 들어 사용자 상호 작용에 따라 값이 동적으로 변경되는 myAttribute 속성이있는 경우이 값을 맞춤 버튼 구성 요소에 "동기화"하여 필요에 따라 회 전자를 숨기거나 표시 할 수 있습니다. 여기서는 빠른 데모입니다. 구성 요소에서이 사용자 정의 버튼을 사용하는 경우, mat-spinner 이미 DOM의 일부가 될 것입니다

맞춤 button.component.ts

@Component({ 
    selector: 'custom-button', 
    template: ` 
    <button mat-button> 
     <span>{{ options.text }}</span> 
     <mat-spinner class="spinner" 
     [diameter]="options.spinnerSize" 
     *ngIf="options.myAttribute"> 
     </mat-spinner> 
    </button> 
    ` 
}) 
export class CustomButton { 
    @Input() options: any; 
} 

: 그것은이 방법을 보여줍니다

,

app.component.html

<custom-button [options]="buttonOptions" (click)="someFunc()"></custom-button> 

다음 전환 동적으로 속성 값을 기반으로 할 수 있습니다 :

app.components.ts

export class AppComonent { 

    buttonOptions: any = { 
    myAttribute: false, 
    text: 'Apply Attribute', 
    spinnerSize: 18 
    } 

    someFunc() { 
    // do something with the custom attribute 
    this.buttonOptions.myAttribute = true; 
    setTimeout(() => { 
     this.buttonOptions.myAttribute = false; 
    }, 2500) 
    } 
} 

myAttribute하지 않는 반드시 부울이어야합니다. 아무 것도 될 수는 없습니다.를 조정하면됩니다. custom-button 구성 요소의 10 조건

불행히도 귀하의 질문에 대한 컨텍스트는 그리 많지 않지만 여기서는 demo을 볼 수 있습니다.