如何在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遍历 table的脚本
Jul 23 Javascript
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
Oct 26 Javascript
JavaScript Eval 函数使用
Mar 23 Javascript
jQuery的Ajax时无响应数据的解决方法
May 25 Javascript
jquery拖动插件(jquery.drag)使用介绍
Jun 18 Javascript
jquery实现的缩略图预览滑块实例
Jun 25 Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
Nov 03 Javascript
vue.js动态数据绑定学习笔记
May 19 Javascript
使用JS编写的随机抽取号码的小程序
Aug 11 Javascript
详解使用angular的HttpClient搭配rxjs
Sep 01 Javascript
Vuejs开发环境搭建及热更新【推荐】
Sep 07 Javascript
js实现图片实时时钟
Jan 15 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
PHILIPS AE3805收音机的分析打磨
2021/03/02 无线电
JS异常处理try..catch语句的作用和实例
2014/05/05 PHP
Netbeans 8.2将支持PHP7 更精彩
2016/06/13 PHP
PHP7新特性之抽象语法树(AST)带来的变化详解
2018/07/17 PHP
PHP命名空间与自动加载机制的基础介绍
2019/08/25 PHP
Avengerls vs KG BO3 第二场2.18
2021/03/10 DOTA
Javascript----文件操作
2007/01/18 Javascript
JS获取单击按钮单元格所在行的信息
2014/06/17 Javascript
JS中FRAME的操作问题实例分析
2014/10/21 Javascript
jQuery中的编程范式详解
2014/12/15 Javascript
Nodejs中session的简单使用及通过session实现身份验证的方法
2016/02/04 NodeJs
原生javascript实现匀速运动动画效果
2016/02/26 Javascript
jquery自定义右键菜单、全选、不连续选择
2016/03/01 Javascript
Javascript动画效果(1)
2016/10/11 Javascript
Bootstrap实现基于carousel.js框架的轮播图效果
2017/05/02 Javascript
vue脚手架vue-cli的学习使用教程
2017/06/06 Javascript
Vue隐藏显示、只读实例代码
2018/07/18 Javascript
layui前端时间戳转化实例
2019/11/15 Javascript
python去除空格和换行符的实现方法(推荐)
2017/01/04 Python
flask中主动抛出异常及统一异常处理代码示例
2018/01/18 Python
python3 kmp 字符串匹配的方法
2018/07/07 Python
深入了解如何基于Python读写Kafka
2019/12/31 Python
pycharm中import呈现灰色原因的解决方法
2020/03/04 Python
python 弧度与角度互转实例
2020/04/15 Python
解决tensorflow/keras时出现数组维度不匹配问题
2020/06/29 Python
Python读取Excel一列并计算所有对象出现次数的方法
2020/09/04 Python
python基于selenium爬取斗鱼弹幕
2021/02/20 Python
详解CSS3中强大的filter(滤镜)属性
2017/06/29 HTML / CSS
中粮集团旗下食品网上购物网站:我买网
2016/09/22 全球购物
彪马荷兰官网:PUMA荷兰
2019/05/08 全球购物
路由表示做什么用的?在linux环境中怎么来配置一条默认路由?
2013/06/07 面试题
质量工程师岗位职责
2013/11/16 职场文书
《影子》教学反思
2014/02/21 职场文书
2014年终个人工作总结
2014/11/07 职场文书
2014年质检工作总结
2014/11/26 职场文书
阿里云ECS云服务器快照的概念以及如何使用
2022/04/21 Servers