組件在Angular 2中如何相互引用？

class TabPane { 
    constructor(
    tabContainer:TabContainer, 
    element:HTMLElement 
) { ... } 
    ... 
} 

class TabContainer { 
    constructor(tabs:Query<TabPane>) { ... } 
    ... 
}

我不明白（選項卡：查詢）部分。組件在Angular 2中如何相互引用？

其中標籤：來自哪裏？
查詢呢？

來源

2016-01-20 Ray Kim

https://angular.io/docs/ts/latest/api/core/Query-var.html – TGH

組件是通過導入和使用它們作爲一個正常的HTML標記的父組件，結帳下面的例子對參考。

my-app組件通過導入命令導入並直接使用它，從而引用HeroDetailComponent。

兩個重要線是

進口

import {HeroDetailComponent} from './hero-detail.component';

部件的通過直接添加標籤到分量模板的使用

<my-hero-detail [hero]="selectedHero"></my-hero-detail>

import {Component} from 'angular2/core'; 
import {Hero} from './hero'; 
import {HeroDetailComponent} from './hero-detail.component'; 

@Component({ 
    selector: 'my-app', 
    template:` 
    <h1>{{title}}</h1> 
    <h2>My Heroes</h2> 
    <ul class="heroes"> 
     <li *ngFor="#hero of heroes" 
     [class.selected]="hero === selectedHero" 
     (click)="onSelect(hero)"> 
     <span class="badge">{{hero.id}}</span> {{hero.name}} 
     </li> 
    </ul> 
    <my-hero-detail [hero]="selectedHero"></my-hero-detail> 
    `,  
    directives: [HeroDetailComponent] 
}) 
export class AppComponent { 
    public title = 'Tour of Heroes'; 
    public heroes = HEROES; 
    public selectedHero: Hero; 

    onSelect(hero: Hero) { this.selectedHero = hero; } 
}

英雄細節組件外觀像這樣，

import {Component} from 'angular2/core'; 
import {Hero} from './hero'; 

@Component({ 
    selector: 'my-hero-detail', 
    template: ` 
    <div *ngIf="hero"> 
     <h2>{{hero.name}} details!</h2> 
     <div><label>id: </label>{{hero.id}}</div> 
     <div> 
     <label>name: </label> 
     <input [(ngModel)]="hero.name" placeholder="name"/> 
     </div> 
    </div> 
    `, 
    inputs: ['hero'] 
}) 
export class HeroDetailComponent { 
    public hero: Hero; 
}

Plunkr Link

來源

2016-01-20 01:24:22

Angular2從構造提供依賴注入。這意味着框架將在當前注入器中爲每個定義爲構造函數參數的元素查找提供者。

當您在構造函數TabPane（TabContainer的子組件）中定義類型爲TabContainer的參數時，Angular2會自動注入父組件實例。

@Component({ 
    selector: 'tab', 
    template: ` 
    <div>Some tab</div> 
    ` 
}) 
class TabPane { 
    constructor(tabContainer:TabContainer) { 
    (...) 
    } 
}

Angular2還允許引用元件視圖中的元素。使用裝飾器@Query，您可以要求Angular2從組件視圖中引用特定類型的組件（在您的案例中爲TabPane），甚至包括元素。以下顯示如何獲取TabContainer之一中使用的TabPane類型的所有組件的列表。

@Component({ 
    selector: 'tab-container', 
    template: ` 
    <div> 
     <tab></tab> 
     <tab></tab> 
    </div> 
    `, 
    directives: [Tab] 
}) 
class TabContainer { 
    constructor(@Query(TabPane) tabs:QueryList<TabPane>) { 
    } 
}

在此示例中，tabs屬性將包含兩個元素。

關於父/子引用，您需要注意模塊的循環依賴關係。我的意思是讓工作成爲你的樣本，你需要同時使用TabContainer和Tab組件。

希望它可以幫助你，蒂埃裏

來源

2016-01-20 08:21:59

組件在Angular 2中如何相互引用？

回答

相關問題