Một thành phần nhiều mẫu dựa trên điều kiện

Question

Vì vậy, đây là thỏa thuận. Tôi có một thành phần thats rất tốt bằng văn bản và được sử dụng ở rất nhiều nơi. Bây giờ tôi cần phải sử dụng cùng một thành phần, nhưng muốn một mẫu khác được hiển thị, dựa trên một điều kiện.

Tôi đã thử rất nhiều.

1) Cố gắng sử dụng nhiều trang trí thành phần - không có may mắn

2) Cố gắng mức bội số của trừu tượng, nơi tôi chỉ kết thúc việc tạo nhiều thành phần - xấu ý tưởng

3) theo nghĩa đen có thể sao chép toàn bộ thành phần, và chỉ cần thay đổi selector và mẫu - xấu ý tưởng

4) Hiện nay tôi đã cố gắng này:

<div *ngIf="!isWizard"> 
    <ul class="nav" role="tablist"> 
     <ng-content select="tab-link"></ng-content> 
    </ul> 
    <ng-content select="tab-content"></ng-content> 
</div> 


<div *ngIf="isWizard"> 
    <nav class="nav-panel sidenav"> 
     <ng-content select=".wizard-title"></ng-content> 
      <ul class="nav" role="tablist"> 
       <ng-content select="tab-link"></ng-content> 
      </ul> 

    </nav> 

    <main class="settings-panel content-area"> 
     <ng-content select="tab-content"></ng-content> 
    </main> 

</div> 

tôi đặt isWizard thuộc tính là true/false. Bây giờ vấn đề là, ng-content chỉ chạy một lần. Vì vậy, khi isWizard là true, mặc dù khối div được hiển thị, ng-content không chạy (vì nó chạy trong khối trên).

5) Thay vì sử dụng ngNếu tôi cũng đã thử ngSwitch - không hoạt động

Tôi đang tuyệt vọng ngay bây giờ. Vui lòng trợ giúp :)

Answer 1

Trong phiên bản gần đây ở trên có thể được thực hiện bằng cách sử dụng * ngIf = "somevar", trong khi bạn có thể chuyển giá trị "somevar" bằng @input.

Ví dụ:

import { Component, OnInit, Input, Output, EventEmitter} from '@angular/core'; 
 
import {SearchPipe} from './../filters/search.pipe'; 
 

 
@Component({ 
 
    selector: 'itra-filter', 
 
    templateUrl: 'filter.component.html', 
 
    styleUrls: ['filter.component.scss'], 
 
    inputs:['IsCheckboxEnabled','IsRadioboxEnabled'], 
 
    outputs: ['itemClicked'] 
 
}) 
 
export class ItraFilterComponent { 
 
\t // Default Value 
 
\t public IsCheckboxEnabled:boolean = false; 
 
\t public IsRadioboxEnabled:boolean = false; 
 

 
\t constructor() { \t \t 
 
\t } 
 

 
\t ngOnInit() { 
 
\t \t 
 
\t } 
 
}

<span class="checkbox-control" *ngIf="IsCheckboxEnabled"> 
 
     <i class="icon icon_Check-box_filled" *ngIf="y.checked"></i> 
 
\t \t \t \t <i class="icon icon_Check-box" *ngIf="!y.checked">  </i> 
 
</span> 
 
     
 
<span class="radiobox-control" *ngIf="IsRadioboxEnabled"> 
 
\t \t \t \t <i class="icon icon_Radio-button-filled" *ngIf="y.checked"></i> 
 
\t \t \t \t <i class="icon icon_Radio-button" *ngIf="!y.checked"></i> 
 
</span>

Answer 2

Theo như tôi biết nó không thể được thực hiện bằng ng-content nhưng bạn có thể đạt được điều này bằng templates (hoặc ng-templates trong góc 4+). Vì vậy, thay vì đi qua nội dung trực tiếp vào thành phần của bạn, chỉ cần quấn nó trong <template> như thế:

<my-component [isWizard]="true"> 
    <template>Hello World!</template> 
</my-component> 

Sau đó, bạn cần phải tiêm mẫu để thành phần của bạn với @ContentChild(TemplateRef) và làm cho nó nhiều lần như bạn muốn.

@Component({ 
    selector: "my-component", 
    template: ` 
    <div *ngIf="!isWizard"> 
     first: <template [ngTemplateRenderer]="template"></template> 
    </div> 
    <div *ngIf="isWizard"> 
     second: <template [ngTemplateRenderer]="template"></template> 
    </div>` 
}) 
export class MyComponent { 

    @ContentChild(TemplateRef) 
    private template: TemplateRef<any>; 

    @Input("isWizard") 
    private isWizard: boolean; 
} 

Có một điều cuối cùng, thành phần của chúng tôi sử dụng ngTemplateRenderer là một chỉ thị tiện ích đơn giản hiển thị mẫu được chuyển qua tham chiếu. Đây là mã cho chỉ thị đó:

@Directive({ selector: '[ngTemplateRenderer]'}) 
export class TemplateRenderer implements OnInit, OnDestroy { 

    @Input("ngTemplateRenderer") 
    private template: TemplateRef<any>; 

    private view: EmbeddedViewRef<any>; 

    constructor(private container: ViewContainerRef) {} 

    ngOnInit(): void { 
     this.view = this.container.createEmbeddedView(this.template); 
    } 

    ngOnDestroy(): void { 
     this.view.destroy(); 
    } 
}