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

  • 相关阅读:
    开始Flask项目
    夜间模式的开启与关闭,父模板的制作
    从首页问答标题到问答详情页
    首页列表显示全部问答,完成问答详情页布局
    制作首页的显示列表
    发布功能完成
    登录之后更新导航
    完成登录功能,用session记住用户名
    完成注册功能
    通过用户模型,对数据库进行增删改查操作
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7097024.html
Copyright © 2011-2022 走看看