Angularjs2——自定义内容

一、什么是自定义内容&作用

自定义内容通常是用来创建可以复用的组件，例如模态框，导航栏。这两个组件是经常要用到的，所以自定义内容就是为组件服用提供了便利，实现了组件的复用，从而减少了重复代码的编写。

二、怎样使用自定义内容

 与自定义内容相关的标签：

现在以网页中的header为例，介绍如何使用ng-content

1.先创建组件用于header

 1 import {Component} from "@angular/core";
 2 @Component({
 3   selector:'header-content',
 4   template:`
 5 
Example header with ng-content
 6 
 7 
 8 
 9 `
10 })
11 export class HeaderComponent{
12 
13 }

2.在定义一个简单的根组件去使用它

 1 import {Component} from "@angular/core";
 2 @Component({
 3   selector:'app',
 4   template:`
 5 
Header content
//此处将自定义的内容放到header-content标签之间
 6 `
 7 })
 8 export class AppComponent{
 9 
10 }

最后组件的DOM树会被Angular处理成以下：

Example Component with ng-content

Header content

我们注意到，header-content标签之间的内容也就是

自定义内容是可以显示多个内容的

 在HeaderComponent中模版改成如下所示：

Example header with ng-content

则在根组件中代码如下：

Header content
//此处将自定义的内容放到header-content标签之间
div with .class-select
Footer content

有了自定义内容，这样我们的很多组件都可以服用了

转载于:https://www.cnblogs.com/Henry-World/p/6523757.html

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！