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).

  • 相关阅读:
    《编写高质量代码Web前端开发修炼之道》(读书笔记) windrainpy
    jQuery琐碎笔记 windrainpy
    【记录】事件冒泡和事件捕获 windrainpy
    JS比较容易迷惑的几个地方 windrainpy
    【转】成为顶级程序员的唯一途径! windrainpy
    jquery键盘事件 windrainpy
    【转】IE绝对定位元素神秘消失或被遮挡的解决 windrainpy
    简单算法
    HTTP的状态
    css的兼容问题
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7097024.html
Copyright © 2011-2022 走看看