在 Angular 应用中创建包含组件
理解组件包含
包含组件就是指可以包含其它组件的组件, 以 Bootstrap 的卡片 (Card) 为例, 它包含页眉 (header) 、 主体 (body) 和 页脚 (footer) , 如下图所示:
<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="#" 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="#" 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="#" 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="#" class="btn btn-primary">This button</a>
</div>
<!-- footer -->
<span card-footer>New <strong>footer</strong></span>
<app-card>
小结
使用包含组件, 可以将布局提取成组件, 动态指定加载的内容, 应该也是很常用的。 而至于选择符 (select), 则建议使用属性, 这样可读性比较好, 也不会破坏 html 的结构。
- 一次误报引发的DNS检测方案的思考:DNS隧道检测平民解决方案
- Andriod基础——Adapter类
- ORM查询语言(OQL)简介--高级篇:脱胎换骨
- 用Java实现处理日期的工具类——常用日期处理方法
- ORM查询语言(OQL)简介--实例篇
- 漏洞预警 | 海洋CMS(SEACMS)0day漏洞预警
- 【机器学习】分类算法评价
- Java中图片处理工具类——能满足各种需求
- onclicklistener到底怎么用?
- 如何入侵联网智能灯泡——LIFX智能灯泡
- Java实现的一个编号生成器工具类——5种方法
- 【机器学习】有趣的机器学习:最简明入门指南
- 不使用反射,“一行代码”实现Web、WinForm窗体表单数据的填充、收集、清除,和到数据库的CRUD
- 海量数据处理利器之布隆过滤器
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 解决layui的table数据重载reload where参数会保留上次条件的问题
- 终于弄懂了Layui表格重载数据
- 剑指Offer LeetCode 面试题21. 调整数组顺序使奇数位于偶数前面
- 剑指Offer LeetCode 面试题17. 打印从1到最大的n位数
- 剑指Offer LeetCode 面试题15. 二进制中1的个数
- 剑指Offer LeetCode 面试题11. 旋转数组的最小数字
- 剑指Offer 面试题09. 用两个栈实现队列
- 剑指Offer 面试题06. 从尾到头打印链表
- 剑指Offre 面试题05. 替换空格
- Datatables获取选中行的某一列的数据
- 终于懂了建造者模式
- (力扣)面试题04. 二维数组中的查找
- 一条命令查询电脑多久没关机
- Android Studio无法运行程序调试程序出现Unable to connect to ADB.Check the Event Log for possible issues.Verify th
- MySQL 中的 DML 语句执行流程,你理解的跟我一样吗?