Angule 動態模版 ngTemplateOutlet 的用法


ngTemplateOutlet 的用法

HTML
 <span class="ant-alert-message" *ngIf="nzMessage">
    <ng-container *ngIf="isMessageString; else messageTemplate">{{ nzMessage }} + 123</ng-container>
    <ng-template #messageTemplate>
        <ng-template [ngTemplateOutlet]="nzMessage"></ng-template>
    </ng-template>
</span>
 
<ng-template #messag>
    HTML模版
</ng-template>

TypeScript
@ViewChild('messag') _message: string | TemplateRef<void>; //定義 _message是一個模板
 
set nzMessage(value: string | TemplateRef<void>) {
    this.isMessageString = !(value instanceof TemplateRef);
    this._message = value;
   }
 
get nzMessage(): string | TemplateRef<void> {
    return this._message;
  }


ngOnInit(): void {
// 代碼中的定義字符串模版   
// this.nzMessage = '這是一個字符串';   this.nzMessage = this._message; }

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM