Angular中ng-template、ng-container、ng-content 的用法

Angular中ng-template、ng-container、ng-content 的用法

1、ng-container

此标签不渲染成DOM;默认显示标签内部内容,也可以使用结构型指令(ngIf、ngFor…)
代码块:

<ng-container>
  <p>Hello World !!!</p>
</ng-container>

网页渲染结果:

<p _ngcontent-vkg-c0="">Hello World !!!</p>

2、ng-template

模板元素,默认情况内部元素不可见。使用方法:
方法一:使用 ngIf 属性,值为 true 显示内容

<ng-template *ngIf="condition">
  <p>Hello World !!!</p>
</ng-template>

还有多种使用方法在此不一一列举,详细介绍可以查看官网

3、ng-content

父组件调用子组件时,将父组件内容投射到子组件指定位置(子组件中 ng-content 所在位置);类似 VUE 中的插槽。分为默认投射,具名投射。
3.1、默认投射 - 子组件中只有一个 ng-content 时

父组件中引入子组件:

<app-child-com>
  <p>- parent component content !!! -</p>
</app-child-com>

子组件:

<p>child component content - begin</p>
<ng-content></ng-content>
<p>child component content - end</p>

显示效果:

child component content - begin
- parent component content !!! -
child component content - end

父组件中 p标签的位置投射到子组件中ng-content的所在位置。

3.1、具名投射 - 子组件有多个 ng-content,需要指定名字进行指定位置投射
父组件内容

<app-child-com>
  <header>
    header - parent component content !!! -
  </header>
  <div id="demo">
    id selector - parent component content !!! -
  </div>
  <div name="demo">
    name - parent component content !!! -
  </div>
</app-child-com>

子组件内容

<p>child component content</p>
<ng-content select="header"></ng-content>
<p>child component content</p>
<ng-content select="#demo"></ng-content>
<p>child component content</p>
<ng-content select="[name=demo]"></ng-content>

使用 select 属性,支持 CSS 选择器,投射对应位置

你可能感兴趣的:(Angular,ng-template,ng-container,angular,前端,javascript)