Angular6中怎么實(shí)現(xiàn)一個(gè)主從組件-創(chuàng)新互聯(lián)

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

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

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

使用 Angular CLI 生成一個(gè)名叫 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.編寫(xiě) HeroDetailComponent的模版（hero-detail.component.html）

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

粘貼過(guò)來(lái)的html代碼中，有selectHero這個(gè)屬性，由于現(xiàn)在我們展示的不僅僅是被選中的hero，而是需要展示的是每一個(gè)hero，這個(gè)過(guò)程相當(dāng)于將HeroDetail這個(gè)組件的功能擴(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>

因?yàn)镠eroDetail重的hero是從其他父組件得到。所以hero 屬性必須是一個(gè)帶有 @Input() 裝飾器的輸入屬性，因?yàn)橥獠康?HeroesComponent 組件將會(huì)綁定到它。

具體步驟：

導(dǎo)入Hero

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

導(dǎo)入Input符號(hào)

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

定義hero

@Input() hero: Hero;

這樣，就對(duì)heroDetail的類文件寫(xiě)好了，heroDetail所做的工作就是：從其他的父組件中接收一個(gè)Hero類型的對(duì)象，并將它展示出來(lái)

3.顯示 HeroDetailComponent

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

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

通過(guò)縮減 HeroesComponent 的職責(zé)簡(jiǎn)化了該組件。
把 HeroDetailComponent 改進(jìn)成一個(gè)功能豐富的英雄編輯器，而不用改動(dòng)父組件 HeroesComponent。
改進(jìn) HeroesComponent，而不用改動(dòng)英雄詳情視圖。
將來(lái)可以在其它組件的模板中重復(fù)使用 HeroDetailComponent。

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

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

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

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

猜你還喜歡下面的內(nèi)容