快捷導(dǎo)航

如何在Angular應(yīng)用中創(chuàng)建包含組件方法示例

更新時(shí)間：2019年03月23日 14:31:57 作者：張志敏

這篇文章主要給大家介紹了關(guān)于如何在Angular應(yīng)用中創(chuàng)建包含組件的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用Angular具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧

理解組件包含

包含組件就是指可以包含其它組件的組件，以 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 來實(shí)現(xiàn)這樣的一個(gè)組件？

卡片的頁眉和頁腳只能顯示文本；
卡片的主體能夠顯示任意內(nèi)容，也可以是其它組件；

這就是所謂的包含。

創(chuàng)建包含組件

在 angular 中，所謂的包含就是在定義固定視圖模板的同時(shí)，通過 <ng-content> 標(biāo)簽來定義一個(gè)可以放動態(tài)內(nèi)容的位置。下面就來實(shí)現(xiàn)一個(gè)簡單的卡片組件。

卡片組件的類定義為：

// 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 是一個(gè)聲明，允許從父組件傳入任意的文本。

卡片組件的的視圖模板定義為：

<!-- 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>

為了能夠在其它組件中使用，需要在對應(yīng)的 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 來生成這個(gè)組件的話，會自動在 AppModule 中添加聲明。

使用卡片組件

在另外一個(gè)組件 AppComponent 中使用剛剛創(chuàng)建的卡片組件的話，代碼如下所示：

<!-- 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>

當(dāng)然，可以使用 [header] 以及 [footer] 進(jìn)行數(shù)據(jù)綁定。

選擇符

<ng-content> 接受一個(gè) select 屬性，允許定義選擇符，可以更加精確選擇被包含的內(nèi)容。打開 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 屬性，用法也需要響應(yīng)的調(diào)整一下

<!-- 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 屬性接受標(biāo)準(zhǔn)的 css 選擇符，比如： select="[card-type=body]" ， select=".card-body" ， select="card-body" 等等。

包含多個(gè)位置

使用 select 屬性，可以在一個(gè)組件中定義多個(gè)包含位置。現(xiàn)在繼續(xù)修改卡片組件，允許頁眉和頁腳包含動態(tài)內(nèi)容。

<!-- 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>

用法也相應(yīng)的修改一下：

<!-- 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>

小結(jié)

使用包含組件，可以將布局提取成組件，動態(tài)指定加載的內(nèi)容，應(yīng)該也是很常用的。而至于選擇符 (select)，則建議使用屬性，這樣可讀性比較好，也不會破壞 html 的結(jié)構(gòu)。

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對腳本之家的支持。

您可能感興趣的文章: