如何在有角的应用中创建包含组件方法示例
理解组件包含
包含组件就是指可以包含其它组件的组件,以引导程序的卡片(卡片)为例,它包含页眉(表头)、主体(正文)和页脚(页脚),如下图所示:
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-卡片小结
使用包含组件,可以将布局提取成组件,动态指定加载的内容,应该也是很常用的。而至于选择符(选择),则建议使用属性,这样可读性比较好,也不会破坏超文本标记语言的结构。
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对我们的支持。
版权声明:如何在有角的应用中创建包含组件方法示例是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。