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
        };
      }
    
    }
  • 相关阅读:
    如何为惠普笔记本ProBook 4431S清理电源风扇通风口灰尘
    office app之 Mail App 从新建到发布
    sublime_text3汉化,破解,安装Package_control支持中文显示
    poj3126prime+BFS
    android开发之欢迎界面
    poj 1151 离散化
    DbVisualizer 9 解决中文乱码问题
    RS232、RS422与RS485串口标准简介
    动态创建菜单和动态关联菜单项事件
    更改路径
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7051990.html
Copyright © 2011-2022 走看看