如何在有角的应用中创建包含组件方法示例

理解组件包含

包含组件就是指可以包含其它组件的组件，以引导程序的卡片（卡片)为例，它包含页眉（表头)、主体（正文)和页脚（页脚),如下图所示：

div class='卡片文本-中心' div class='卡片-标题' Featured/div class='卡片-正文' H5 class='卡片-标题'特殊标题处理/h5 p class='card-text '下面带有支持文本，作为附加内容的自然导入/p a href=' # ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' class=' BTN BTN-primary ' go某地/a/div class='卡片-页脚文本-静音2天前/div/div那么问题来了，如何用有角的来实现这样的一个组件？

卡片的页眉和页脚只能显示文本；卡片的主体能够显示任意内容，也可以是其它组件；这就是所谓的包含。

创建包含组件

在有角的中，所谓的包含就是在定义固定视图模板的同时，通过尼日利亚含量标签来定义一个可以放动态内容的位置。下面就来实现一个简单的卡片组件。

卡片组件的类定义为：

//卡片。组件。t从“@棱角分明/核心”导入{组件、输入、输出}；@ Component({ selector : ' app-card '，templateurl : ' card。组件。html '，})导出类卡组件{ @ Input()头：字符串='这是标题'；@Input() footer:字符串='这是页脚；} @输入是一个声明，允许从父组件传入任意的文本。

卡片组件的的视图模板定义为：

！-card.component . html-div class=' card ' div class=' card-header '/div div class=' card-body '！-此处的单槽翻译-ng-content/ng-content/div class=' card-footer '/div/div为了能够在其它组件中使用，需要在对应的AppModule中添加声明：

从“@棱角分明/核心”导入{ ng module }；从" @angular/platform-browser "导入{ BrowserModule }；从""导入{ AppComponent } ./app。组件'；从""导入{ CardComponent } ./卡片。组件'；//导入卡组件@ ng模块({ imports :[BrowserModule]，声明： [ AppComponent，CardComponent ]，//在声明中添加bootstrap: [ AppComponent ]，})导出类AppModule { }如果使用了角度-cli来生成这个组件的话，会自动在AppModule中添加声明。

使用卡片组件

在另外一个组件AppComponent中使用刚刚创建的卡片组件的话，代码如下所示：

！-app.component . html-h1Single slot trans clusion/h1 app-card header=' my header ' footer=' my footer '！-把你的动态内容放在这里H4牌你可以把任何内容放在这里/h4 p class='card-text '例如这一行文本和/p a href=' # ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' class=' BTN BTN-primary '这个按钮/a/表示“受到某种对待的人”:dividend | reverend动态内容-应用程序卡当然，可以使用[标题]以及[页脚]进行数据绑定。

选择符

尼日利亚含量接受一个挑选属性，允许定义选择符，可以更加精确选择被包含的内容。打开card.component.html，做一些修改

！-card.component . html-div=' card ' div=' card-header '/div！-将挑选属性添加到ng-content-ng-content select='[卡片-正文]'/ng-content div class='卡片-页脚/div/div注意，添加了选择='[卡体]',这意味着将被包涵的元素必须有卡体属性，用法也需要响应的调整一下

！-app.component . html-h1Single slot trans clusion/h1 app-card header=' my header ' footer=' my footer '！-把你的动态内容放在这里- div class='card-block '卡体！-我们在这里添加卡体属性- h4 class='card-title '您可以将任何内容放在这里/h4 p class='card-text '例如这一行文本和/p a href=' # ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' class=' BTN BTN-primary '这个按钮/a/表示“受到某种对待的人”:dividend | reverend动态内容-app-card ng-内容的挑选属性接受标准的钢性铸铁选择符，比如：选择='[卡片类型=正文]',选择='。"卡体",选择="卡体"等等。

包含多个位置

使用挑选属性，可以在一个组件中定义多个包含位置。现在继续修改卡片组件，允许页眉和页脚包含动态内容。

！-card.component.html-卡-头！-此处标题槽-ng-内容选择='[卡片-标题]'/ng-内容/div！-将挑选属性添加到ng-content-ng-content select='[卡片-正文]'/ng-content div class='卡片-页脚！-此处页脚位置-ng-内容选择='[卡片-页脚]'/ng-内容/div/div用法也相应的修改一下：

！-app.component . html-H1single slot trans clusion/h1 app-card！-表头-跨度卡-表头新强烈的表头/strong/span！-body-div=' card-block '卡-body H4=' card-title '您可以在此处放置任何内容/h4 p class='card-text '例如，这一行文本和/p a href=' # ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' class=' BTN BTN-primary '此按钮/a/-页脚跨度卡片-页脚新的强烈的页脚/strong/span app-卡片小结

使用包含组件，可以将布局提取成组件，动态指定加载的内容，应该也是很常用的。而至于选择符（选择),则建议使用属性，这样可读性比较好，也不会破坏超文本标记语言的结构。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对我们的支持。