类方法无法使用Angular 2 Typescript

我有一个

组件，它有一个方法

makeSelected

，顾名思义，它使一个项目被选中。这在点击项目时效果很好，但是在我的主页上，我希望不必点击就可以选中它

我已将Navbar组件注入到我的主组件中，并在主构造函数中调用

makeSelected

方法：

import {Component, View} from 'angular2/core';
import {Navbar} from '/app/navbar/navbar';

@Component({
  selector: 'home',
  providers: [Navbar]
})

@View({
  templateUrl: '/app/home/home.html',
  directives: [Navbar]
})

export class Home {

    constructor(public navbar : Navbar) {

      this.navbar = navbar;
      this.navbar.makeSelected('Item 1');

    }

}

导航栏组件：

import {Component, View} from 'angular2/core';

@Component({
  selector: 'navbar'
})

@View({
  template: `
  <ul>
    <li *ngFor="#item of items; #i = index" (click)="makeSelected(item.name)">

      {{ item.name }} <div *ngIf=" item.selected == true"> [selected] </div>

    </li>
  </ul>
  `
})

export class Navbar{
  constructor(){
      this.items = [
        {id: 1, name: 'Item 1', href: 'http://www.google.com', selected: false}
      ]
  }
  makeSelected(name)
  {
    for(var i in this.items)
    {
      this.items[i].selected = false;

      if(this.items[i].name == name)
      {
        this.items[i].selected = true;
      }
    }
  }
}

从'angular2/core'导入{Component，View}；
@组成部分({
选择器：“导航栏”
})
@看法({
模板：`


{{item.name}}[选定]


`
})
导出类导航条{
构造函数（）{
此项。项目=[
{id:1，名称：'Item 1'，href:'http://www.google.com“，已选择：false}
]
}
makeSelected（名称）
{
for（此.items中的变量i）
{
this.items[i].selected=false；
if（this.items[i].name==name）
{
this.items[i].selected=true；
}
}
}
}

页面显示良好，但未选择该项目。没有错误，因此似乎调用了该方法

---

为什么没有选择该项目

不能像这样将子组件注入父组件。您应该使用

@ViewChild

或

@Query

引用此组件：

export class Home {
  constructor(@Query(Navbar) children:QueryList<Navbar>) {
    this.navbar = children.first();
    this.navbar.makeSelected('Item 1');
  }
}

导出类主页{
构造函数（@Query（Navbar）子项：QueryList）{
this.navbar=children.first（）；
this.navbar.makeSelected（'Item 1'）；
}
}

小心从组件的

提供程序

属性中删除

导航栏

。仅将其保存在

指令

属性中

有关更多详细信息，请参见此问题：

---

可能是注入构造函数的导航条是另一个实例吗？父

组件

正在访问子

组件？这很酷吗？@PankajParkar，是的，很好。这是另一个应该很少见的方向：见米什科对这条线索的第一句评论：，谢谢！我已经成功地用
@ViewChild
实现了这一点，感谢Pankaj和Mark的评论@PankajParkar，是的，Navbar组件和相关的Navbar服务听起来是个不错的解决方案。这是我昨晚为一个导航服务写的，有一个可观测的，在这里可能适用。