美文网首页
Angular 组件动态传入模板

Angular 组件动态传入模板

作者: 飞凡的陀螺 | 来源:发表于2018-12-26 22:07 被阅读26次

写组件的时候，一般都有默认模板，但是很多时候希望组件可以接收自定义模板。

比如 ng-zorro项目中的 BackTop回到顶部 组件就支持自定义模板。
默认时可以使用<nz-back-top></nz-back-top>。获得这个图标。

image.png

也可以通过

<nz-back-top [nzTemplate]="tpl" [nzVisibilityHeight]="100" (nzOnClick)="notify()">
      <ng-template #tpl>
        <div class="ant-back-top-inner">UP</div>
      </ng-template>
</nz-back-top>

添加自定义模板。


image.png

核心是 ngTemplateOutlet

我们通过源码来看是如何实现的。
关键字 ngTemplateOutlet

  1. 先看模板，ngTemplateOutlet 是一个指令，它接收模板变量，可以实现模板的动态渲染，
    在这里，如果定义了 nzTemplate 变量就使用它，否则用默认的defaultContent。
image.png
  1. nzTemplate 是输入变量，类型是TemplateRef, 即模板引用。
image.png
  1. 使用自定义模板
image.png

相关文章

  • Angular 组件动态传入模板

    写组件的时候，一般都有默认模板，但是很多时候希望组件可以接收自定义模板。 比如 ng-zorro项目中的 Back...

  • Angular动态组件&响应式表单的实现[附源码]

    本文将通过一个简单的例子简单展示Angular动态组件+响应式表单的使用。【关键字】： Angular，动态组件，...

  • Angular模版篇

    Angular 模板 什么是模板 在 Angular 中，组件扮演着控制器或视图模型的角色，模板则扮演视图的角色。...

  • Angular4-学习笔记-4-模板语法

    学习资料来自 Angular.cn 与 Angular.io。 模板语法 在线例子 在 Angular 中，组件扮...

  • AngularJS 模板语法

    模板语法 模板是编写 Angular 组件最重要的一环，你至少需要深入理解以下知识点才能玩转 Angular 模板...

  • Angular2学习笔记-组件及其选项介绍

    组件是构成angular2应用的基本单元，angular应用就是由一棵组件树组成的。我们可以在组件的模板内容中调用...

  • Angular-组件交互进阶

    Angular组件进阶 前几天, 解决了困扰许久的Angular组件自定义部分模板问题, 才准备梳理下知识, 有了...

  • Angular4.x说明2018-07-17

    概述：Angular 应用是由组件组成的。组件由 HTML 模板和组件类组成，组件类控制视图，每个组件都以@Com...

  • AngularJs模板（Template）

    我们通过组件自带的模板来定义视图，模板以HTML形式存在，用来告诉Angular如何渲染组件（视图）多数情况下，模...

  • Vue引用模板和动态组件

    一、引用模板 将组件内容放到模板