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


Posted in Javascript onMarch 23, 2019

理解组件包含

包含组件就是指可以包含其它组件的组件, 以 Bootstrap 的卡片 (Card) 为例, 它包含页眉 (header) 、 主体 (body) 和 页脚 (footer) , 如下图所示:

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

<div class="card text-center">
 <div class="card-header">
 Featured
 </div>
 <div class="card-body">
 <h5 class="card-title">Special title treatment</h5>
 <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-primary">Go somewhere</a>
 </div>
 <div class="card-footer text-muted">
 2 days ago
 </div>
</div>

那么问题来了, 如何用 angular 来实现这样的一个组件?

  • 卡片的页眉和页脚只能显示文本;
  • 卡片的主体能够显示任意内容, 也可以是其它组件;

这就是所谓的包含。

创建包含组件

在 angular 中, 所谓的包含就是在定义固定视图模板的同时, 通过 <ng-content> 标签来定义一个可以放动态内容的位置。 下面就来实现一个简单的卡片组件。

卡片组件的类定义为:

// card.component.ts
import { Component, Input, Output } from '@angular/core';

@Component({
 selector: 'app-card',
 templateUrl: 'card.component.html',
})
export class CardComponent {
 @Input() header: string = 'this is header'; 
 @Input() footer: string = 'this is footer';
}

@Input 是一个声明, 允许从父组件传入任意的文本。

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

<!-- card.component.html -->
<div class="card">
 <div class="card-header">
 
 </div>
 <div class="card-body">
 <!-- single slot transclusion here -->
 <ng-content></ng-content>
 </div>
 <div class="card-footer">
 
 </div>
</div>

为了能够在其它组件中使用, 需要在对应的 AppModule 中添加声明:

import { NgModule }  from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { CardComponent } from './card.component'; // import card component

@NgModule({
 imports:  [ BrowserModule ],
 declarations: [ AppComponent, CardComponent ], // add in declaration
 bootstrap: [ AppComponent ],
})
export class AppModule { }

如果使用了 angular-cli 来生成这个组件的话, 会自动在 AppModule 中添加声明。

使用卡片组件

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

<!-- app.component.html -->
<h1>Single slot transclusion</h1>
<app-card header="my header" footer="my footer">
 <!-- put your dynamic content here -->
 <div class="card-block">
 <h4 class="card-title">You can put any content here</h4>
 <p class="card-text">For example this line of text and</p>
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-primary">This button</a>
 </div>
 <!-- end dynamic content -->
<app-card>

当然, 可以使用 [header] 以及 [footer] 进行数据绑定。

选择符

<ng-content> 接受一个 select 属性, 允许定义选择符, 可以更加精确选择被包含的内容。 打开 card.component.html , 做一些修改

<!-- card.component.html -->
<div class="card">
 <div class="card-header">
 
 </div>
 <!-- add the select attribute to ng-content -->
 <ng-content select="[card-body]"></ng-content>
 <div class="card-footer">
 
 </div>
</div>

注意, 添加了 select="[card-body]" , 这意味着将被包涵的元素必须有 card-body 属性, 用法也需要响应的调整一下

<!-- app.component.html -->
<h1>Single slot transclusion</h1>
<app-card header="my header" footer="my footer">
 <!-- put your dynamic content here -->
 <div class="card-block" card-body><!-- We add the card-body attribute here -->
 <h4 class="card-title">You can put any content here</h4>
 <p class="card-text">For example this line of text and</p>
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-primary">This button</a>
 </div>
 <!-- end dynamic content -->
<app-card>

<ng-content> 的 select 属性接受标准的 css 选择符, 比如: select="[card-type=body]" select=".card-body" select="card-body" 等等。

包含多个位置

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

<!-- card.component.html -->
<div class="card">
 <div class="card-header">
 <!-- header slot here -->
 <ng-content select="[card-header]"></ng-content>
 </div>
 <!-- add the select attribute to ng-content -->
 <ng-content select="[card-body]"></ng-content>
 <div class="card-footer">
 <!-- footer slot here -->
 <ng-content select="[card-footer]"></ng-content>
 </div>
</div>

用法也相应的修改一下:

<!-- app.component.html -->
<h1>Single slot transclusion</h1>
<app-card>
 <!-- header -->
 <span card-header>New <strong>header</strong></span>
 <!-- body -->
 <div class="card-block" card-body>
 <h4 class="card-title">You can put any content here</h4>
 <p class="card-text">For example this line of text and</p>
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-primary">This button</a>
 </div>
 <!-- footer -->
 <span card-footer>New <strong>footer</strong></span>
<app-card>

小结

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

总结

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

Javascript 相关文章推荐
js 加载时自动调整图片大小
May 28 Javascript
node.js中的fs.chmodSync方法使用说明
Dec 18 Javascript
jQuery插件实现多级联动菜单效果
Dec 01 Javascript
vue插件tab选项卡使用小结
Oct 27 Javascript
解决webpack打包速度慢的解决办法汇总
Jul 06 Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
仿京东快报向上滚动的实例
Dec 13 Javascript
Node.js readline 逐行读取、写入文件内容的示例
Mar 01 Javascript
JS实现的input选择图片本地预览功能示例
Aug 29 Javascript
QRCode.js二维码生成并能长按识别
Oct 16 Javascript
Vue源码解析之数组变异的实现
Dec 04 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
Nov 03 Javascript
vue中组件的3种使用方式详解
Mar 23 #Javascript
ES6入门教程之Array.from()方法
Mar 23 #Javascript
setTimeout与setInterval的区别浅析
Mar 23 #Javascript
如何通过setTimeout理解JS运行机制详解
Mar 23 #Javascript
vue中axios请求的封装实例代码
Mar 23 #Javascript
vueScroll实现移动端下拉刷新、上拉加载
Mar 22 #Javascript
浅谈Angular单元测试总结
Mar 22 #Javascript
You might like
PHP的autoload机制的实现解析
2012/09/15 PHP
PHP类与对象中的private访问控制的疑问
2012/11/01 PHP
基于magic_quotes_gpc与magic_quotes_runtime的区别与使用介绍
2013/04/22 PHP
如何判断php数组的维度
2013/06/10 PHP
解析argc argv在php中的应用
2013/06/24 PHP
php字符串替换函数substr_replace()用法实例
2015/03/17 PHP
js innerHTML 的一些问题的解决方法
2008/06/22 Javascript
js window.onload 加载多个函数的方法
2009/11/02 Javascript
文本框input聚焦失焦样式实现代码
2012/10/12 Javascript
js浮动图片的动态效果
2013/07/10 Javascript
使用js完成节点的增删改复制等的操作
2014/01/02 Javascript
纯javascript制作日历控件
2015/07/17 Javascript
微信小程序 devtool隐藏的秘密
2017/01/21 Javascript
vue中用动态组件实现选项卡切换效果
2017/03/25 Javascript
在js中做数字字符串补0(js补零)
2017/03/25 Javascript
基于jQuery实现无缝轮播与左右点击效果
2018/05/13 jQuery
Javascript操作select控件代码实例
2020/02/14 Javascript
JavaScript 几种循环方式以及模块化的总结
2020/09/03 Javascript
基于python内置函数与匿名函数详解
2018/01/09 Python
Python之用户输入的实例
2018/06/22 Python
python实现的读取网页并分词功能示例
2019/10/29 Python
python中文分词库jieba使用方法详解
2020/02/11 Python
python计算导数并绘图的实例
2020/02/29 Python
pytorch查看模型weight与grad方式
2020/06/24 Python
python 爬虫爬取京东ps4售卖情况
2020/12/18 Python
资深地理教师自我评价
2013/09/21 职场文书
企业优秀员工事迹材料
2014/05/28 职场文书
环卫工人先进事迹材料
2014/06/02 职场文书
卫生院艾滋病宣传活动小结
2014/07/09 职场文书
政府个人对照检查材料
2014/08/28 职场文书
财政局长个人总结
2015/03/04 职场文书
退休欢送会致辞
2015/07/31 职场文书
什么是求职信?求职信应包含哪些内容?
2019/08/14 职场文书
python_tkinter弹出对话框创建
2022/03/20 Python
DE1107机评
2022/04/05 无线电
SpringBoot前端后端分离之Nginx服务器下载安装过程
2022/08/14 Servers