真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

重慶分公司 重慶分公司

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營(yíng)銷
• 小程序
• 新聞動(dòng)態(tài)
• 成功案例
• 關(guān)于我們
028-86922220

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營(yíng)銷
• 小程序
• 新聞動(dòng)態(tài)
• 成功案例
• 關(guān)于我們

 
 Featured
 

那么問題來了， 如何用 angular 來實(shí)現(xiàn)這樣的一個(gè)組件？

• 卡片的頁眉和頁腳只能顯示文本；

• 卡片的主體能夠顯示任意內(nèi)容， 也可以是其它組件；

這就是所謂的包含。

創(chuàng)建包含組件

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

卡片組件的類定義為：

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

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

為了能夠在其它組件中使用， 需要在對(duì)應(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è)組件的話， 會(huì)自動(dòng)在 AppModule 中添加聲明。

使用卡片組件

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

Single slot transclusion

 
 
 You can put any content here
 For example this line of text and

 This button
 
 

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

選擇符

接受一個(gè) select 屬性， 允許定義選擇符， 可以更加精確選擇被包含的內(nèi)容。 打開 card.component.html ， 做一些修改

注意， 添加了 select="[card-body]" ， 這意味著將被包涵的元素必須有 card-body 屬性， 用法也需要響應(yīng)的調(diào)整一下

Single slot transclusion

 
 
 You can put any content here
 For example this line of text and

 This button
 
 

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

包含多個(gè)位置

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

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

Single slot transclusion

 
 New header
 
 
 You can put any content here
 For example this line of text and

 This button
 
 
 New footer

小結(jié)

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

看完了這篇文章，相信你對(duì)“怎么在Angular應(yīng)用中創(chuàng)建包含組件方法”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！