Angular 2 以编程方式绑定 ngIf

Question

I am building a page header component which has two states:

• Standard: Shows detailed content
• Compacted: Shows minimal content

The idea is that this component can be added to any 'page' component like so:

home.component.html

<app-page-header>

    <app-page-header-standard>
        // Standard Content
    </app-page-header-standard>

    <app-page-header-compact>
        // Compact Content
    </app-page-header-compact>

</app-page-header>

The code I have so far:

page-header.component.html

<div class="wrapper">

    <!-- The standard and compact components are transcluded here -->
    <ng-content></ng-content>

    <a (click)="toggleHeaderState()">Toggle me</a>
</div>

page-header.component.ts

import {Component, OnInit, ViewEncapsulation, Input, ContentChild} from '@angular/core';
import {PageHeaderStandardComponent} from "./page-header-standard.component";
import {PageHeaderCompactComponent} from "./page-header-compact.component";

@Component({
    selector: 'app-page-header',
    templateUrl: './page-header.component.html',
    styleUrls: ['./page-header.component.scss'],
    encapsulation: ViewEncapsulation.None
})
export class PageHeaderComponent implements OnInit {

    @ContentChild(PageHeaderStandardComponent) headerStandard: PageHeaderStandardComponent;
    @ContentChild(PageHeaderCompactComponent) headerCompact: PageHeaderCompactComponent;

    /**
     * Toggle the header standard and compact state
     * @type {boolean}
     */
    @Input() compacted: boolean = false;

    constructor() {
    }

    ngOnInit() {
        console.log(this.headerStandard);
        console.log(this.headerCompact);

        // TODO
        // Bind compact and standard component to compacted input
        // i.e. one hides while the other shows
    }

    toggleHeaderState() {
        this.compacted = !this.compacted;
    }
}

The Question: How do I assign an ngIf to the two ContentChild components in the ngOnInit function? ie show one component when the compacted input is true and then show the other when the compacted input is false

Answer 1

You can't dynamically add ngIf . You can set the hidden attribute

@ContentChild(PageHeaderStandardComponent, {read: ElementRef}) headerStandard: PageHeaderStandardComponent;
@ContentChild(PageHeaderCompactComponent, {read: ElementRef}) headerCompact: PageHeaderCompactComponent;

ngAfterViewInit() {
    console.log(this.headerStandard);
    console.log(this.headerCompact);
    this.headerStandard.nativeElement.setAttribute('hidden', !compacted);
    this.headerCompact.nativeElement.setAttribute('hidden', compacted);
}

Answer 2

If the header will only have standard/compact components you could project them like this and use *ngIf directly in that template

For page-header.component.html

<div class="wrapper">
    <ng-content select="app-page-header-standard" *ngIf="!compacted"></ng-content>

    <ng-content select="app-page-header-compact" *ngIf="compacted"></ng-content>

    <a (click)="toggleHeaderState()">Toggle me</a>
</div>

Answer 3

This was resolved in the end by using a template loader directive.

The template loader directive allows the user to optionally include either the header compact and header standard templates. If either template is not included it is hidden and no empty divs or containers are left in the markup.

The resulting (simplified) markup looks like:

app.component.html

<wbo-page-header>
    <template pageHeaderStandardTemplate>
        // Standard Content
    </template>

    <template pageHeaderCompactTemplate>
        // Compact Content
    </template>
</wbo-page-header>

page-header.component.html

<div class="wrapper">

    <div class="header-standard" *ngIf="pageHeaderStandardTemplate && !compacted" >
        <template [templateLoader]="pageHeaderStandardTemplate"></template>
    </div>

    <div class="header-compact" *ngIf="pageHeaderCompactTemplate && compacted">
        <template [templateLoader]="pageHeaderCompactTemplate"></template>
    </div>

    <span ngIf*="pageHeaderStandardTemplate && pageHeaderCompactTemplate" (click)="toggleCompactedState">Toggle Header</span>
</div>

page-header.component.ts

/**
 * Directive to define a template for the page header standard
 */
@Directive({selector: '[pageHeaderStandardTemplate]'})
export class PageHeaderStandardTemplate {
}

/**
 * Directive to define a template for the page header compact
 */
@Directive({selector: '[pageHeaderCompactTemplate]'})
export class PageHeaderCompactTemplate {
}


@Component({
    // Removed for simplicity
})
export class PageHeaderComponent implements OnInit {

    @Input() compacted: boolean = false;

    /**
     * Define the Page Header Standard template
     */
    @ContentChild(PageHeaderStandardTemplate, {read: TemplateRef}) public pageHeaderStandardTemplate;

    /**
     * Define the Page Header Standard template
     */
    @ContentChild(PageHeaderCompactTemplate, {read: TemplateRef}) public pageHeaderCompactTemplate;

    /**
     * Toggle the header compacted state
     */
    toggleCompactedState() {
        this.compacted = !this.compacted;
    }
}