如何在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 相关文章推荐
ejs v9 javascript模板系统
Mar 21 Javascript
jquery 定位input元素的几种方法小结
Jul 28 Javascript
jquery中$(#form :input)与$(#form input)的区别
Aug 18 Javascript
js获取图片宽高的方法
Nov 25 Javascript
js与applet相互调用的方法
Jun 22 Javascript
深入浅析Vue组件开发
Nov 25 Javascript
js实现返回顶部效果
Mar 10 Javascript
js图片放大镜实例讲解(必看篇)
Jul 17 Javascript
json2.js 入门教程之使用方法与实例分析
Sep 14 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
Jan 15 Javascript
使用FileReader API创建Vue文件阅读器组件
Apr 03 Javascript
js中关于Blob对象的介绍与使用
Nov 29 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
第4章 数据处理-php数组的处理-郑阿奇
2011/07/04 PHP
php实现的递归提成方案实例
2015/11/14 PHP
php mysql_list_dbs()函数用法示例
2017/03/29 PHP
PHP使用curl_multi实现并发请求的方法示例
2018/04/29 PHP
PHP+MySQL实现在线测试答题实例
2020/01/02 PHP
jquery ajax执行后台方法
2010/03/18 Javascript
jquery选择器之层级过滤选择器详解
2014/01/27 Javascript
关于javaScript注册click事件传递参数的不成功问题
2014/07/18 Javascript
学习JavaScript设计模式(接口)
2015/11/26 Javascript
jQuery easyui刷新当前tabs的方法
2016/09/23 Javascript
vue实现可增删查改的成绩单
2016/10/27 Javascript
JS中substring与substr的用法
2016/11/16 Javascript
Angular4表单验证代码详解
2017/09/03 Javascript
解决Jquery下拉框数据动态获取的问题
2018/01/25 jQuery
微信小程序内拖动图片实现移动、放大、旋转的方法
2018/09/04 Javascript
Nodejs调用Dll模块的方法
2018/09/17 NodeJs
jQuery选择器之基本选择器用法实例分析
2019/02/19 jQuery
javascript实现图片轮播代码
2019/07/09 Javascript
小程序自动化测试的示例代码
2020/08/11 Javascript
[01:02:09]Liquid vs TNC 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21
2020/07/19 DOTA
利用python的socket发送http(s)请求方法示例
2018/05/07 Python
python字符串常用方法
2018/06/14 Python
python tkinter图形界面代码统计工具(更新)
2019/09/18 Python
Pycharm+Python+PyQt5使用详解
2019/09/25 Python
18个Python脚本可加速你的编码速度(提示和技巧)
2019/10/17 Python
Python openpyxl 插入折线图实例
2020/04/17 Python
Django后端分离 使用element-ui文件上传方式
2020/07/12 Python
Python JSON常用编解码方法代码实例
2020/09/05 Python
python 逆向爬虫正确调用 JAR 加密逻辑
2021/01/12 Python
HTML5 Canvas实现360度全景图的示例代码
2018/01/29 HTML / CSS
运动会稿件50字
2014/02/17 职场文书
建筑安全责任书范本
2014/07/24 职场文书
感谢信怎么写
2015/01/21 职场文书
档案管理员岗位职责
2015/02/12 职场文书
自主招生推荐信怎么写
2015/03/26 职场文书
python+pyhyper实现识别图片中的车牌号思路详解
2022/12/24 Python