Angular6中怎么實現一個主從組件

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

1.創建一個新的組件

使用 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這個屬性，由于現在我們展示的不僅僅是被選中的hero，而是需要展示的是每一個hero，這個過程相當于將HeroDetail這個組件的功能擴大化。所以將其更改為：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 組件將會綁定到它。

具體步驟：

導入Hero

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

導入Input符號

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

定義hero

@Input() hero: Hero;

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

3.顯示 HeroDetailComponent

現在有HeroDetail組件顯示每一個Hero的具體詳情信息，而Heroes組件需要顯示每一個Hero的詳細信息，這個時候，Heroes組件和heroDetail組件就有了主從關系，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>

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

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

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

• 改進 HeroesComponent，而不用改動英雄詳情視圖。

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

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。