Question

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

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

我不理解（制表符：查询）部分。

标签：来自哪里？
查询怎么样？

Answer 1

通过导入组件并将其用作父组件上的普通HTML标记来引用组件，请查看以下示例。

my-app组件通过导入命令导入HeroDetailComponent并直接使用它来引用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 Detail Component看起来像这样，

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个组件。

希望它可以帮到你，亨利

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

2 个答案: