Javascript 在Angular 2中，组件如何相互引用？ 类选项卡窗格{ 建造师( tabContainer:tabContainer， 元素：HtmleElement ) { ... } ... } 类TabContainer{ 构造函数（制表符：查询）{…} ... }

我不懂（制表符：查询）部分

标签：来自哪里

问得怎么样

---

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

my app component正在通过导入命令导入HeroDetailComponent并直接使用它来引用上的HeroDetailComponent

这两条重要的路线是：

进口

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

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

通过直接将标记添加到组件模板，可以使用组件

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

---

从'angular2/core'导入{Component}；
从“/Hero”导入{Hero}；
从“./hero detail.component”导入{HeroDetailComponent}；
@组成部分({
选择器：“我的应用程序”，
模板：`
{{title}}
我的英雄


{{hero.id}{{hero.name}


`,      
指令：[HeroDetailComponent]
})
导出类AppComponent{
公共头衔=‘英雄之旅’；
公众英雄=英雄；
公众选择的英雄：英雄；
onSelect（hero:hero）{this.selectedHero=hero；}
}

英雄细节组件如下所示

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

从'angular2/core'导入{Component}；
从“/Hero”导入{Hero}；
@组成部分({
选择器：“我的英雄细节”，
模板：`
{{hero.name}}详细信息！
id:{{hero.id}
姓名：
`,
输入：[“英雄”]
})
导出类组件{
公众英雄：英雄；
}

---

Angular2提供了来自构造函数的依赖项注入。这意味着框架将在当前注入器中为定义为构造函数参数的每个元素寻找提供者

当您在

TabPane

的构造函数中定义类型为

TabContainer

的参数时，Angular2将自动注入父组件实例

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

在此示例中，

选项卡

属性将包含两个元素

关于父/子引用，您需要注意模块的循环依赖关系。我的意思是要使您的示例正常工作，您需要在同一个模块中同时包含

TabContainer

和

Tab

组件

希望它能帮助你， 蒂埃里

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

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

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