浅谈Angular模板指令:ng-template和ng-container的用法


本文摘自PHP中文网,作者青灯夜游,侵删。

本篇文章带大家简单了解一下Angular模板的ng-template和ng-container指令,介绍一下ng-template和ng-container指令使用方法。

ng-template指令简介

ng-template是一个 Angular 结构型指令,用来渲染 HTML。 它永远不会直接显示出来。 事实上,在渲染视图之前,Angular 会把 ng-template 及其内容替换为一个注释。【相关教程推荐:《angular教程》】

如果没有使用结构型指令,而仅仅把一些别的元素包装进 ng-template 中,那些元素就是不可见的。

像*ngFor、 *ngIf这些指令Angular内部会把这些属性翻译成一个 元素 并用它来包裹宿主元素。

ng-container指令简介

为了避免创建额外的div,我们可以改用ng-container,它是一个分组元素,但它不会污染样式或元素布局,因为 Angular 压根不会把它放进 DOM 中。ng-container 是一个由 Angular 解析器负责识别处理的语法元素。 它不是一个指令、组件、类或接口,更像是 JavaScript 中 if 块中的花括号。

ng-container用法

用法一(最基础的用法)

我们在一个列表循环里有写时候有一些判断要完成,我们知道angular的结构指令是不允许两个同时存在的,这个时候如果我们又不想增加多余的div就可以用ng-container

1

2

3

4

5

<ul>

    <ng-container *ngFor="let item of list">

        <li *ngIf="item.context">{{item.context}}</li>

    </ng-container>

</ul>

用法二(结合ngSwitch一起使用)

1

2

3

4

5

<ng-container [ngSwitch]="type">

    <ng-container *ngSwitchCase="'title'">标题</ng-container>

    <ng-container *ngSwitchCase="'text'">内容</ng-container>

    <ng-container *ngSwitchDefault>其他</ng-container>

</ng-container>

当然ngSwitch也可以直接写在html标签上。

用法三(结合ng-template使用)

可以跟template配合使用,将重复的模块内容抽取出来,也可传参给要显示的模板。 比如下面的这个例子,甲方有甲方姓名和介绍,乙方也同样有这些介绍,我们就可以把共同介绍整合出来。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

<div>

    <!--甲方-->

    <div>

        <div class="left">甲方:</div>

        <div class="right">

            甲方姓名

            <ng-container *ngTemplateOutlet="introduce; context: {data: data.partyA}"></ng-container>

            <!--也可以写成这种方式-->

            <!--

            <ng-container [ngTemplateOutlet]="introduce"

                [ngTemplateOutletContext]="{data: data.partyA}">

            </ng-container>

            [ngTemplateOutlet]也可用在ng-template上

            -->

        </div>

    </div>

    <!--乙方-->

    <div>

        <div class="left">乙方:</div>

        <div class="right">

            乙方姓名

            <ng-container *ngTemplateOutlet="introduce; context: {data: data.partyB}"></ng-container>

        </div>

    </div>

    <!--let-data="data"就是上面传进来的值-->

    <ng-template #introduce let-data="data">

        <p>合同介绍......</p>

    </ng-template>

</div>

ngTemplateOutlet是定义模板引用和模板的上下文(即ng-template)对象的字符串,这样如果有多个模板引用可以用这种方式 ngTemplateOutletContext是附加到的上下文(即ng-template)对象EmbeddedViewRef。这应该是一个对象,该对象的键可用于本地模板let 声明的绑定。$implicit在上下文(即ng-template)对象中使用键会将其值设置为默认值。 ngTemplateOutlet也可用于外部传进来的模板

child.component.html

1

<ng-template [ngTemplateOutlet]="tplRef" [ngTemplateOutletContext]="{data: data}"></ng-template>

child.component.ts

1

@Input() tplRef: TemplateRef<any>

ng-template用法

用法一

结合*ngIf使用,这样可以不用加两次不同判断条件,可以在html里直接使用if else语句

1

2

3

4

<div *ngIf="text; else noData">{{text}}</div>

<ng-template #noData>

    <div class="gary">暂无数据</div>

</ng-template>

用法二

页面里使用antd的modalService创建对话框时,可以模板写在html里面,通过引用加载过来放到modal的nzContent里(说的有点乱了,看代码吧)

1

<ng-tempalte #content>xxxxxxx</ng-template>

1

2

3

4

5

6

7

8

9

10

export class AppComponent implements OnInit {

    // 引入模板

     @ViewChild('content') contentTpl: TemplateRef<any>;

    ngOnInit() {

        this.modalService.create({

            nzTitle: '标题',

            nzContent: this.contentTpl

        })

    }

}

用法三

以模板的形式,作为一个输入变量传给组件,这样我们就可以在用这个组件时写成自己想要的内容 比如我们写个共用的暂无数据的组件,一般只用传text文字就可以有些特殊的时候我们可能需要一些新增按钮。

empty.component.html

1

2

3

4

5

6

7

8

9

10

11

<div>

    <img src=""/>

    <div>

        <ng-container [ngSwitch]="true">

            <ng-container *ngSwitchCase="isTemplate(text)"

                [ngTemplateOutlet]="text"

            ></ng-container>

        </ng-container>

        {{text || ''}}

    </div>

</div>

empty.component.ts

1

2

3

4

5

6

export class EmptyComponent {

    @Input() text: TemplateRef<any>

  isTemplate(text: any) {

      return text instanceof TemplateRef;

  }

}

总结,都是一些最基础的用法,现在所了解的就这些用法,如果有知道更多的欢迎大家补充。

更多编程相关知识,请访问:编程视频!!

以上就是浅谈Angular模板指令:ng-template和ng-container的用法的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

16个值得收藏的Angular ui框架分享

详解Angular中的route路由

Angular中的firebase身份验证(代码示例)

详解Angular父子组件间如何传值?

详解Angular根模块与特性模块

Angular是什么

浅谈Angular中组件的生命周期

深入了解Angular中的component组件

一文快速了解Angular中的ngrx/store框架

浅谈Angular如何编译打包?如何使用docker发布?

更多相关阅读请进入《Angular》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...