angular ng-template

最新推荐文章于 2022-09-15 21:21:48 发布

米斯特尔曾

最新推荐文章于 2022-09-15 21:21:48 发布

阅读量3.6k

点赞数 1

分类专栏： angular2/4 文章标签： angular ng-template

本文链接：https://blog.youkuaiyun.com/qq_30101131/article/details/85109048

版权

angular2/4 专栏收录该内容

36 篇文章

订阅专栏

本文深入探讨了Angular中模板引用变量的使用方法，包括@ViewChild装饰器的应用，以及如何通过ViewContainerRef显示模板内容。同时，文章解释了*ngFor和*ngIf背后的实现原理，揭示了它们如何利用模板来提高代码的简洁性和可读性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

解释

其实和html5的template是一样的就是将模板保存到html中然后需要时再抓出来显示到指定位置

代码

import { Component, ViewChild, TemplateRef,ViewContainerRef } from '@angular/core';

@Component({
  selector: 'app-root',
  // templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  template: `
    <div>
      <ng-template #tpl>
        <span>鬼子到我想干什么</span>
      </ng-template>
      <div #container></div>
      <button (click)="showTpl()">btn</button>
    </div>
  `
})
export class AppComponent {
  title = 'try-tpl';
  @ViewChild('tpl') tt: TemplateRef<void>;
  @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;
  showTpl() {
    this.container.createEmbeddedView(this.tt);
  }
}

在这里插入图片描述
当然其实也可以

import { Component, ViewChild, TemplateRef,ViewContainerRef } from '@angular/core';

@Component({
  selector: 'app-root',
  // templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  template: `
    <div>
      <ng-template #tpl>
        <span>鬼子到我想干什么</span>
      </ng-template>
      <div #container></div>
      <button (click)="showTpl()">btn</button>
    </div>
  `
})
export class AppComponent {
  title = 'try-tpl';
  @ViewChild('tpl') tt: TemplateRef<void>;
  @ViewChild('tpl', { read: ViewContainerRef }) container: ViewContainerRef;
  showTpl() {
    this.container.createEmbeddedView(this.tt);
  }
}

效果是一样的
viewContainerRef 获取到的就是一个容器

拓展

ngFor和ngIf其实就是用的,没有这个标签的原因是*这语法糖

<div *ngFor="let hero of heroes;">
 {{hero.name}}
</div>

解析成

<ng-template ngFor let-hero [ngForOf]="heroes" >
 <div>{{hero.name}}</div>
</ng-template>