angular4—— ng-template 定义一棵树

原创 tianxiaofeng747 随笔 待整理 367阅读 2017-06-22 15:07:58 举报

首先看一下官网的用法

angular4——ng-template定义一棵树
英文不好,看不懂,然后看人家的例子
javascript 代码

然后copy 到项目中, 发现点眉目。
ng-template 实际上是定义一个模版 , 至于模版里的内容, 可以是 html 字符串, 也可以是 自定义组件。 然后用 ng-container 调用, 调用的时候可以传入内容, 然后用 这个模版渲染结果。

大致明白后就开始动手吧!
1:首先 定义一棵树
html 代码

然后,定义一个组件 把树的数据传入组件,
html 代码

组件的模版是这样的
html 代码

调用这个组件
<app-hero-son [list]="list"></app-hero-son>

angular4——ng-template定义一棵树

大致就这样。
渲染结果如下:

angular4——ng-template定义一棵树

在线例子:
https://embed.plnkr.co/anT4W9fPIfNuspSBmutk/

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复