Angular2 ng-content 指令在组件中嵌入内容
来源:互联网 发布:房地产税的影响知乎 编辑:程序博客网 时间:2024/06/06 07:17
ng-content指令可以在组件中嵌入模板代码,方便定制可复用的组件。
比如:页面的header是个通用组件,导航菜单样式已经设定好,只需在header标签内加上菜单内容。
用ng-content标签,将父组件模板中包含的menu标签内容加到指定位置。select属性支持css选择器,如:"#id",".class","[name=value]"等
header组件的模板:
<p> {{title}}</p><p><input type="checkbox" name="cb" [(ngModel)]="isChecked" (click)="toggle()" />Checkbox <br /></p><ng-content select="menu"></ng-content>
父组件使用方法:
<app-header #header [title]="title" name="{{name}}" (checkEmitter)="onCheckedChange($event)" > <menu> <ul> <li>aa</li> <li>bb</li> <li>cc</li> </ul> </menu></app-header><app-header #header2 [title]="title2" name="{{name}}" (checkEmitter)="onCheckedChange($event)" ></app-header><button (click)="header.toggle()">通过本地变量调用子组件方法</button><button (click)="headerToggle()">通过ViewChild调用子组件方法</button>
原文链接:https://www.pocketdigi.com/20170204/1557.html
还有篇英文:http://www.tuicool.com/articles/RBvqiai
0 0
- Angular2 ng-content 指令在组件中嵌入内容
- Angular2 ng-content 在组件中嵌入内容
- 【Angular】组件内容嵌入ng-content
- angular2+ ng-content浅谈
- 在Swing中嵌入SWT的组件
- 在html中嵌入一个文件内容
- 在网页中嵌入多媒体内容
- Angular2组件与指令的小实践
- angularJs中ng-cloak指令
- 怎么在html中嵌入一个文件内容
- angular2中如何在组件中不使用template 或者其url
- AngularJS中ng-app、ng-model、ng-bind、ng-init、ng-repeat、自定义指令
- angular2.0指令 (directive) 和组件 (component) 的生命周期解析
- 在组件是嵌入图片
- angular2集成ng-bootstrap
- 如何向一个控件中嵌入Content
- Angular2学习笔记——在子组件中拿到路由参数
- angular2 组件
- Git将本地仓库上传到Github
- osg隐藏物体或者Node(多个物体轮流显示)
- PL/SQL保存用户名密码 自定义界面
- win dhcp ip获取失败
- 1036. 跟奥巴马一起编程(15)
- Angular2 ng-content 指令在组件中嵌入内容
- Lua自定义迭代器。
- Butter-Knife使用
- JAVA 线程之内存可见性
- 【Android studio】解决 Error:CreateProcess error=216, 该版本的 %1 与您运行的 Windows 版本不兼容。请查看计算机的系统信息,了解是否需要 x86
- android自动化测试Uiautomator源码分析之二
- 老梁谈雄安新区
- 4启动界面意图的分类+5隐式意图的详细参数
- 解析服务器传来的 JSON 文件