如何在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 相关文章推荐
jquery pagination插件实现无刷新分页代码
Oct 13 Javascript
extjs每个组件要设置唯一的ID否则会出错
Jun 15 Javascript
JS显示日历和天气的方法
Mar 01 Javascript
通过javascript进行UTF-8编码的实现方法
Jun 27 Javascript
浅谈jQuery中ajaxPrefilter的应用
Aug 01 Javascript
解决wx.onMenuShareTimeline出现的问题
Aug 16 Javascript
详解angular element()方法使用
Apr 08 Javascript
vue2.0使用swiper组件实现轮播效果
Nov 27 Javascript
让网站自动生成章节目录索引的多个js代码
Jan 07 Javascript
简单谈谈javascript高级特性
Sep 04 Javascript
JS实现网站楼层导航效果代码实例
Jun 16 Javascript
vuejs实现下拉框菜单选择
Oct 23 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
PHP5 面向对象程序设计
2008/02/13 PHP
php mysql Errcode: 28 终极解决方法
2009/07/01 PHP
php中使用Curl、socket、file_get_contents三种方法POST提交数据
2011/08/12 PHP
PHP将回调函数作用到给定数组单元的方法
2014/08/19 PHP
推荐25款php中非常有用的类库
2014/09/29 PHP
PHP7 新特性详细介绍
2016/09/06 PHP
php如何比较两个浮点数是否相等详解
2019/02/12 PHP
使用jquery自定义鼠标样式满足个性需求
2013/11/05 Javascript
用js+iframe形成页面的一种遮罩效果的具体实现
2013/12/31 Javascript
javascript自动生成包含数字与字符的随机字符串
2015/02/09 Javascript
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
2015/10/01 Javascript
jQuery Html控件基本操作(日常收集整理)
2016/03/11 Javascript
Javascript字符串拼接小技巧(推荐)
2016/06/02 Javascript
解决nodejs中使用http请求返回值为html时乱码的问题
2017/02/18 NodeJs
Bootstrap媒体对象学习使用
2017/03/07 Javascript
jquery操作ul的一些操作笔记整理(干货)
2017/08/31 jQuery
AngularJS使用ng-repeat遍历二维数组元素的方法详解
2017/11/11 Javascript
vue自定义一个v-model的实现代码
2018/06/21 Javascript
使用vue2.0创建的项目的步骤方法
2018/09/25 Javascript
JavaScript原型继承和原型链原理详解
2020/02/04 Javascript
解决vscode进行vue格式化,会自动补分号和双引号的问题
2020/10/26 Javascript
Tensorflow实现卷积神经网络的详细代码
2018/05/24 Python
Python OpenCV 使用滑动条来调整函数参数的方法
2019/07/08 Python
使用virtualenv创建Python环境及PyQT5环境配置的方法
2019/09/10 Python
Pandas-Cookbook 时间戳处理方式
2019/12/07 Python
Html5 Canvas 实现一个“刮刮乐”游戏
2019/09/05 HTML / CSS
德国电子商城:ComputerUniverse
2017/04/21 全球购物
欧姆龙医疗保健与医疗产品:Omron Healthcare
2020/02/10 全球购物
HSRP的含义以及如何工作
2014/09/10 面试题
单位提档介绍信
2014/01/17 职场文书
中学运动会广播稿
2014/01/19 职场文书
毕业典礼主持词大全
2014/03/26 职场文书
文明倡议书范文
2014/04/15 职场文书
单位个人查摆问题及整改措施
2014/10/28 职场文书
python 自动刷新网页的两种方法
2021/04/20 Python
配置nginx 重定向到系统维护页面
2021/06/08 Servers