如何在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 相关文章推荐
javascript Keycode对照表
Oct 24 Javascript
Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
Jun 28 Javascript
iframe异步加载实现点击左边菜单加载右边内容实例讲解
Mar 04 Javascript
编写js扩展方法判断一个数组中是否包含某个元素
Nov 08 Javascript
整理的比较全的event对像在ie与firefox浏览器中的区别
Nov 25 Javascript
JavaScript制作windows经典扫雷小游戏
Mar 31 Javascript
简单实现Bootstrap标签页
Aug 09 Javascript
从零开始做一个pagination分页组件
Mar 15 Javascript
浅析node应用的timing-attack安全漏洞
Feb 28 Javascript
vue-cli设置publicPath小记
Apr 14 Javascript
JS 创建对象的模式实例小结
Apr 28 Javascript
Vue如何实现组件间通信
May 15 Vue.js
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位运算的简单权限设计
2013/06/30 PHP
PHP 500报错的快速解决方法
2016/12/14 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
PHP常见过waf webshell以及最简单的检测方法
2019/05/21 PHP
PHP创建XML的方法示例【基于DOMDocument类及SimpleXMLElement类】
2019/09/10 PHP
php获取是星期几的的一些常用姿势
2019/12/15 PHP
js tab 选项卡
2009/04/26 Javascript
基于jquery的鼠标拖动效果代码
2012/05/30 Javascript
jquery根据name属性查找的小例子
2013/11/21 Javascript
js 弹出框只弹一次(二次修改之后的)
2013/11/26 Javascript
Javascript玩转继承(一)
2014/05/08 Javascript
javascript中数组的多种定义方法和常用函数简介
2014/05/09 Javascript
EasyUI中实现form表单提交的示例分享
2015/03/01 Javascript
JS实现的通用表单验证插件完整实例
2015/08/20 Javascript
通过XMLHttpRequest和jQuery实现ajax的几种方式
2015/08/28 Javascript
jQuery实现的个性化返回底部与返回顶部特效代码
2015/10/30 Javascript
jQuery实现的多张图无缝滚动效果【测试可用】
2016/09/12 Javascript
React应用中使用Bootstrap的方法
2017/08/15 Javascript
React 组件间的通信示例
2018/06/14 Javascript
JS监听事件的叠加和移除功能
2018/11/19 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
2019/04/29 Javascript
微信小程序防止多次点击跳转(函数节流)
2019/09/19 Javascript
[00:43]拉比克至宝魔导师密钥展示
2018/12/20 DOTA
python实现nao机器人手臂动作控制
2019/04/29 Python
python爬虫之自制英汉字典
2019/06/24 Python
基于 Django 的手机管理系统实现过程详解
2019/08/16 Python
PyQt5连接MySQL及QMYSQL driver not loaded错误解决
2020/04/29 Python
详解Anaconda安装tensorflow报错问题解决方法
2020/11/01 Python
使用CSS Grid布局实现网格的流动
2014/12/30 HTML / CSS
雷锋式好少年事迹材料
2014/08/17 职场文书
市级三好学生事迹材料
2014/08/27 职场文书
中班下学期个人总结
2015/02/12 职场文书
党支部意见范文
2015/06/02 职场文书
暑期社会实践新闻稿
2015/07/17 职场文书
中学生打架《检讨书》范文
2019/08/12 职场文书
Java中的Kotlin 内部类原理
2022/06/16 Java/Android