zoukankan      html  css  js  c++  java
  • [Angular] Angular Advanced Features

    Previously we have tab-panel template defined like this:

    <ul class="tab-panel-buttons" *ngIf="tabs">
      <li
        [ngClass]="{selected: tab.selected}"
        (click)="selectTab(tab)"
        *ngFor="let tab of tabs;">{{tab.title}}
      </li>
    </ul>
    
    <ng-content></ng-content>

    So the template is not overrideable. If we want later able to pass in a different template, we need to use some advanced features from Angular.

    ng-template: We can wrap the whole header into <ng-template>, by defualt, ng-template will not render to the DOM.

    <ng-template #defaultTabHeader>
      <ul class="tab-panel-buttons" *ngIf="tabs">
        <li
          [ngClass]="{selected: tab.selected}"
          (click)="selectTab(tab)"
          *ngFor="let tab of tabs;">{{tab.title}}
        </li>
      </ul>
    </ng-template>

    To be able to render the template to the DOM; we need to use <ng-content>:

    <ng-template #defaultTabHeader let-tabs="tabsX">
      <ul class="tab-panel-buttons" *ngIf="tabs">
        <li
          [ngClass]="{selected: tab.selected}"
          (click)="selectTab(tab)"
          *ngFor="let tab of tabs;">{{tab.title}}
        </li>
      </ul>
    </ng-template>
    
    <ng-content *ngTemplateOutlet="defaultTabHeader; context: tabsContext"></ng-content>
    
    <ng-content></ng-content>
    import {AfterContentInit, Component, ContentChildren, OnInit, QueryList} from '@angular/core';
    import {AuTabComponent} from '../au-tab/au-tab.component';
    
    @Component({
      selector: 'au-tab-panel',
      templateUrl: './au-tab-panel.component.html',
      styleUrls: ['../tab-panel.component.scss']
    })
    export class AuTabPanelComponent implements OnInit, AfterContentInit {
    
    
      @ContentChildren(AuTabComponent)
      tabs: QueryList<AuTabComponent>;
    
      constructor() { }
    
      ngOnInit() {
      }
    
      ngAfterContentInit(): void {
        const selectedTab = this.tabs.find(tab => tab.selected);
        if(!selectedTab && this.tabs.first) {
          this.tabs.first.selected = true;
        }
      }
    
      selectTab(tab: AuTabComponent) {
        this.tabs.forEach(t => t.selected = false);
        tab.selected = true;
      }
    
      get tabsContext() {
        return {
          tabsX: this.tabs
        };
      }
    
    }
  • 相关阅读:
    BZOJ2697 特技飞行 【贪心】
    BZOJ2795/2890/3647 [Poi2012]A Horrible Poem 【字符串hash】
    BZOJ2823 [AHOI2012]信号塔 【最小圆覆盖】
    BZOJ2924 [Poi1998]Flat broken lines 【Dilworth定理 + 树状数组】
    洛谷P3759 [TJOI2017]不勤劳的图书管理员 【树状数组套主席树】
    POJ 2955
    江南大学第三届程序设计竞赛K题
    Codeforces 894C
    Codeforces 894B
    HDU 1789
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7051990.html
Copyright © 2011-2022 走看看