Как компоненты, на которые ссылаются друг на друга в Angular 2?

Question

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

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

Я не понимаю (вкладки: запрос).

1. где есть вкладки: из?

2. Что относительно запроса?

Answer 1

компоненты являются ориентировочными, импортируя их и использовать их как обычный HTML тег на вашем родительском компоненте, Checkout следующий пример.

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; } 
} 

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

Answer 2

Angular2 обеспечивает инъекции зависимостей от конструктора. Это означает, что инфраструктура будет искать поставщика в текущем инжекторе для каждого элемента, определенного как параметры конструктора.

При определении параметра типа TabContainer в конструкторе TabPane, который является суб компонентом TabContainer один, Angular2 будет автоматически вводить экземпляр компонента родительский.

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

Angular2 позволяет также ссылаться на элементы на виду компонента. Используя декоратор @Query, вы запрашиваете Angular2 для ссылки на компоненты определенного вида (TabPane в вашем случае) из вида компонента и даже элементов. Ниже показано, как получить список всех компонентов типа TabPane, которые используются в пределах TabContainer.

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

В этом образце tabs свойство будет содержать два элемента.

Что касается ссылок на родительские/дочерние элементы, вам нужно быть осторожными с циклическими зависимостями модулей. Я хочу сделать работу с вашим образцом, вам нужно иметь как TabContainer, так и Tab компонентов в том же модуле.

Надеется, что это помогает вам, Тьерри