如何在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="#" 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 的结构。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对我们的支持。

(0)

相关推荐

  • 动态创建Angular组件实现popup弹窗功能

    起步: 直接使用ngIf 把弹窗的DOM直接放在页面底下隐藏,通过ngIf这样的指令控制其显示. 改进: 封装成angular模块,通过服务控制其显示 直接使用ngIf的话,让人不爽的地方就在于不够通用,每个页面都得加DOM.改进的话可以把比较通用的一些DOM封装成组件,统一添加到全局页面中,并将显示的控制交给一个angular服务来控制其显示. 比如定义了两个组件(DialogComponent, AlertComponent),将他们都添加到AppComponent下,然后提供一个Popup

  • Angular7创建项目、组件、服务以及服务的使用

    三大前端项目就剩angular没学了,在网上找了几个教程,这里总结一下,方便以后用到时查阅 创建项目 首先安装cli工具 npm install -g @angular/cli 创建一个空项目, 有两处要选择的,一个是路由,我这里是要路由的,还有一个开发css的语言,我这里选择scss,就不截图了,选完后会自动通过yarn安装依赖,稍等一会就好了 ng new pybbs-front-angular 创建好了,运行 npm run start 或者 ng serve 启动服务,然后就可以在浏览器

  • Angular 4根据组件名称动态创建出组件的方法教程

    一.理解angular组件 组件是一种特殊的指令,使用更简单的配置项来构建基于组件的应用程序架构,这样他能简单地写app,通过类似的web Component 或者angular2的样式.web Component 是一个规范.马上就要成为标准. 应用组件的优点: 比普通指令配置还简单 提供更好的默认设置和最好的实践 对基于组建的应用架构更优化. 对angular2的升级更平滑. 不用组建的情况: 对那些在 compile或者pre-link阶段要执行操作的指令,组件不能用,因为无法到达那个阶段

  • 详解Angular 4.x 动态创建组件

    动态创建组件 这篇文章我们将介绍在 Angular 中如何动态创建组件. 定义 AlertComponent 组件 首先,我们需要定义一个组件. exe-alert.component.ts import { Component, Input } from '@angular/core'; @Component({ selector: "exe-alert", template: ` <h1>Alert {{type}}</h1> `, }) export cl

  • Angularjs 创建可复用组件实例代码

    AngularJS框架可以用Service和Directive降低开发复杂性.这个特性非常适合用于分离代码,创建可测试组件,然后将它们变成可重用组件. Directive是一组独立的JavaScript.HTML和CSS,它们封装了一个特定的行为,它将成为将来创建的Web组件的组成部分,我们可以在各种应用中重用这些组件.在创建之后,我们可以直接通过一个HTML标签.自定义属性或CSS类.甚至可以是HTML注释,来执行一个Directive. 这一篇教程将介绍如何创建一个'自定义步长选择' Dir

  • 如何在Angular应用中创建包含组件方法示例

    理解组件包含 包含组件就是指可以包含其它组件的组件, 以 Bootstrap 的卡片 (Card) 为例, 它包含页眉 (header) . 主体 (body) 和 页脚 (footer) , 如下图所示: <div class="card text-center"> <div class="card-header"> Featured </div> <div class="card-body">

  • Laravel 如何在blade文件中使用Vue组件的示例代码

    Laravel 如何在blade文件中使用Vue组件,具体代码详情请看下文: 1. 安装laravel/ui依赖包 composer require laravel/ui 2.生成vue基本脚手架 php artisan ui react 系统还提供了非常便捷的auth脚手架,带登录注册. php artisan ui react --auth 3.组件位置 Vue组件ExampleComponent.vue将被放置在resources/js/components目录中.ExampleCompo

  • 如何在Vue.JS中使用图标组件

    原文链接:https://gist.github.com/Justineo/fb2ebe773009df80e80d625132350e30 本文对原文进行一次翻译,并从React开发者的角度简单地做了一些解读. 此文不包含字体图标和SVG sprite.仅在此讨论允许用户按需导入的图标系统. There are three major ways of exposing API of an icon component in Vue.js and each one of them has its

  • C# 如何在WINForm程序中创建XML文件

    <?xml version="1.0" encoding="gb2312"?> <FilesInformation>   <version>1.0.1818.42821</version>   <description>说明</description>   <FileItem    FileName="name"   FileVersion="sdf"

  • 如何在JS文件中获取Vue组件

    1. 背景 最近在写项目时候遇到这样一个需求: 我封装了一个js文件 utils.js,然后在组件 my-component.vue 中引用了该js文件. 在 utils.js 文件中有一些函数,需要操作 my-component.vue 中的 data 和 methods. 为了方便理解,上述 js 文件和组件名非实际工程中的名字,仅是示例. 2. 思路 通过调用函数把 组件实例 this 传递到 被应用的 js 文件 里. 3. 目录结构 src/ ├── App.vue ├── asset

  • 在Angular中使用JWT认证方法示例

    本文介绍了在Angular中使用JWT认证方法示例,分享给大家,具体如下: 项目地址: grading-system 基于session的认证和基于token的认证的方式已经被广泛使用.在session认证中,服务端会存储一份用户登录信息,这份登录信息会在响应时传递给浏览器并保存为Cookie,在下次请求时,会带上这份登录信息,这样就能识别请求来自哪个用户. 在基于session的认证中,每个用户都要生成一份session,这份session通常保存在内存中,随着用户量的增加,服务端的开销会增大

  • Java 在PPT中创建散点图的实现示例

    目录 创建图表前 创建图表时 其他注意事项 本文将以Java代码示例展示如何在PPT幻灯片中创建散点图表. 创建图表前 需要在Java程序中导入用于操作PPT的jar包 Free Spire.Presentation for Java.可参考如下两种方法导入: 方法1:手动导入jar包.需下载jar包到本地,并解压,找到lib文件夹下的jar文件.然后按照如下步骤执行,导入: 方法2:maven仓库下载导入.需在pom.xml文件中配置maven仓库路径,并指定依赖.配置内容如下: <repos

  • 在 Python 中创建DataFrame的方法

    目录 方法一:创建空的DataFrame ​方法二:使用List创建DataFrame​ ​方法三:使用字典创建DataFrame​ ​方法四:使用数组创建带索引DataFrame​ 方法五:从字典列表创建DataFrame ​方法六:使用zip()函数创建DataFrame​ ​方法七:从序列的字典创建DataFrame​ 前言: DataFrame是数据的二维集合. 它是一种数据结构,其中数据以表格形式存储. 数据集按行和列排列: 我们可以在DataFrame中存储多个数据集. 我们可以执行

  • Java实现在PPT中创建SmartArt图形的示例代码

    目录 代码编译环境 引入jar包 创建 SmartArt 图形 完整代码 效果图 SmartArt其实就是一个文字的可视化工具,用户可在PowerPoint,Word,Excel中使用该特性创建各种图形图表.SmartArt 图形是信息和观点的视觉表示形式.可以通过从多种不同布局中进行选择来创建 SmartArt 图形,从而快速.轻松.有效地传达信息.简单的来说SmartArt就是PPT内建的逻辑图表,主要用于表达文本之间的逻辑关系,可帮助你快速.轻松.有效的传达信息.本文就将为您介绍如何通过J

  • 在pycharm中创建django项目的示例代码

    在pycharm中创建django项目的方法步骤,分享给大家,具体如下: 创建完成后,我们可以看看django项目是否可以启动 在Terminal 中输入命令 python manage.py runserver 能看到一下界面证明启动成功 在项目的时候肯定会用到数据库 所以我们需要进入settings中更改数据库的配置 DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', 'NAME': "django_test&qu

随机推荐