zoukankan      html  css  js  c++  java
  • [Angular] Configurable Angular Components

    We are going to have a modal component:

    <au-modal >
    
    </au-modal>

    And we can pass default modal body by content projection:

    <au-modal >
        <modal-body></modaö-body>
    </au-modal>

    So 'modal-body' will be shown by default. 

    Now we want to modal body can be configurable. We can choose to pass in a new template thought @Input, if template was passed in then use template instead of 'modal-body':

    <ng-template #newModalBody>
        <!-- template goes here-->
    </ng-template>
    
    <au-modal [body]="newModalBody">
        <au-modal-body></au-modal-body>
    </au-modal>

    To do that, we defined a 'ng-template' and mark it as 'newModalBody' templateRef. It contians ours new template. And we can pass the template thought @Input.

    So in the au-modal, it defines:

    import {Component, Input, OnInit, TemplateRef} from '@angular/core';
    
    @Component({
      selector: 'au-modal',
      templateUrl: './au-modal.component.html',
      styleUrls: ['./au-modal.component.scss']
    })
    export class AuModalComponent implements OnInit {
    
      @Input() body: TemplateRef<any>;
      constructor() { }
    
      ngOnInit() {
      }
    
    }

    In the component html, we need to check whether we pass in the template or not, if new template is present then we use it, otherwise, we fallback to default content projection:

    <div class="modal-overlay">
    
      <div class="modal-body">
    
        <ng-container *ngIf="body else projectionBody">
          <ng-container *ngTemplateOutlet="body"></ng-container>
        </ng-container>
    
        <ng-template #projectionBody>
          <ng-content></ng-content>
        </ng-template>
    
      </div>
    
    </div>

    The reason here we use two ng-container is because, for one ng-container can only have one structure directive (*ngIf or *ngTeplateOutlet).

  • 相关阅读:
    C#匿名类与dynamic关键字有意思的玩法
    C#中参数化查询速度慢的原因
    拉姆达表达式的一些常用知识
    git的学习
    yield return的使用。。。
    C# Cache缓存的应用
    C# 异步编程,async与await的简单学习
    SSH
    SSM搭建手册
    PLsql快捷键
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7097024.html
Copyright © 2011-2022 走看看