Angular2 ng-content 在组件中嵌入内容

最新推荐文章于 2023-12-30 17:16:23 发布

原创最新推荐文章于 2023-12-30 17:16:23 发布 · 1.8k 阅读

CC 4.0 BY-SA版权

文章标签：

0 篇文章

订阅专栏

本文详细介绍了Angular2中ng-content指令的使用方法及其属性。通过示例解释如何使用ng-content在组件中嵌入内容，包括如何利用select属性来指定内容的位置。此外还介绍了Angular2中用于绑定输入和输出属性、事件监听、内容查询等装饰器。

<ng-content select="menu"></ng-content>

用ng-content标签，将父组件模板中包含的menu标签内容加到指定位置。select属性支持css选择器，

Class field decorators for directives and components	import {Input, …} from ‘angular2/angular2’;
@Input() myProperty;	声明一个输入属性，并且绑定到模板，譬如：
@Output() myEvent = new EventEmitter();	声明一个输出口属性，绑定到某个可以绑定的事件：
@HostBinding(‘[class.valid]’) isValid;	将某个元素属性绑定到某个指令或者组件的属性
@HostListener(‘click’, [‘$event’]) onClick(e) {…}	将某个事件绑定到组件
@ContentChild(myPredicate) myChildComponent;	将第一个可以查到的组件内容对象绑定到当前属性
@ContentChildren(myPredicate) myChildComponents;	将组件内容查询的结果绑定到当前元素
@ViewChild(myPredicate) myChildComponent;	将第一个组件视图查询得到的子组件绑定到当前元素
@ViewChildren(myPredicate) myChildComponents;	将当前根据视图查询到的子组件的列表绑定到当前元素