Angular6中怎么實現(xiàn)一個主從組件，很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

目前成都創(chuàng)新互聯(lián)已為千余家的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬空間、網(wǎng)站托管、服務(wù)器租用、企業(yè)網(wǎng)站設(shè)計、江干網(wǎng)站維護(hù)等服務(wù)，公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

1.創(chuàng)建一個新的組件

使用 Angular CLI 生成一個名叫 hero-detail 的新組件。

wjydeMacBook-Pro:demo wjy$ ng generate component hero-detail
CREATE src/app/hero-detail/hero-detail.component.css (0 bytes)
CREATE src/app/hero-detail/hero-detail.component.html (30 bytes)
CREATE src/app/hero-detail/hero-detail.component.spec.ts (657 bytes)
CREATE src/app/hero-detail/hero-detail.component.ts (288 bytes)
UPDATE src/app/app.module.ts (548 bytes)

這樣就生成了 HeroDetailComponent 組件所需要的文件，并把它聲明在 AppModule 中。

2.編寫 HeroDetailComponent的模版（hero-detail.component.html）

從 HeroesComponent 模板的底部把表示英雄詳情的 HTML 代碼剪切粘貼到所生成的 HeroDetailComponent 模板中。

粘貼過來的html代碼中，有selectHero這個屬性，由于現(xiàn)在我們展示的不僅僅是被選中的hero，而是需要展示的是每一個hero，這個過程相當(dāng)于將HeroDetail這個組件的功能擴(kuò)大化。所以將其更改為：hero , hero-detail.component.html如下：

<div *ngIf="hero">
 <h3>{{hero.name | uppercase}} Details</h3>
 <div><span>id: </span>{{hero.id}}</div>
 <div>
  <label>name:
   <input [(ngModel)]="hero.name" placeholder="name"/>
  </label>
 </div>
 
</div>

因為HeroDetail重的hero是從其他父組件得到。所以hero 屬性必須是一個帶有 @Input() 裝飾器的輸入屬性，因為外部的 HeroesComponent 組件將會綁定到它。

具體步驟：

導(dǎo)入Hero

import { Hero } from '../hero';

導(dǎo)入Input符號

import { Component, OnInit, Input } from '@angular/core';

定義hero

@Input() hero: Hero;

這樣，就對heroDetail的類文件寫好了，heroDetail所做的工作就是：從其他的父組件中接收一個Hero類型的對象，并將它展示出來

3.顯示 HeroDetailComponent

現(xiàn)在有HeroDetail組件顯示每一個Hero的具體詳情信息，而Heroes組件需要顯示每一個Hero的詳細(xì)信息，這個時候，Heroes組件和heroDetail組件就有了主從關(guān)系，heroes組件需要將需要展示詳情的Hero對象傳給具有展示功能的HeroDetail組件

HeroDetailComponent 的選擇器是 'app-hero-detail'。 把 <app-hero-detail> 添加到 HeroesComponent 模板的底部，以便把英雄詳情的視圖顯示到那里，并把 HeroesComponent.selectedHero 綁定到該元素的 hero 屬性， HeroesComponent模版即：

<h3>My Heroes</h3>
<ul class="heroes">
 <li *ngFor="let hero of heroes" (click)="onSelect(hero)" [class.selected]="hero === selectedHero">
  <span class="badge">{{hero.id}}</span> {{hero.name}}
 </li>
</ul>
<app-hero-detail [hero]="selectedHero"></app-hero-detail>

保存瀏覽器刷新，界面和之前的不會有變化，但是會有一下優(yōu)點：

• 通過縮減 HeroesComponent 的職責(zé)簡化了該組件。

• 把 HeroDetailComponent 改進(jìn)成一個功能豐富的英雄編輯器，而不用改動父組件 HeroesComponent。

• 改進(jìn) HeroesComponent，而不用改動英雄詳情視圖。

• 將來可以在其它組件的模板中重復(fù)使用 HeroDetailComponent。

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進(jìn)一步的了解或閱讀更多相關(guān)文章，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對創(chuàng)新互聯(lián)的支持。

網(wǎng)站名稱：Angular6中怎么實現(xiàn)一個主從組件-創(chuàng)新互聯(lián)
文章路徑：http://www.rwnh.cn/article12/ddcdgc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營銷推廣、網(wǎng)站建設(shè)、移動網(wǎng)站建設(shè)、用戶體驗、自適應(yīng)網(wǎng)站、動態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)