类方法不起作用Angular 2 Typescript

Question

我有一个<navbar> 组件，它有一个方法makeSelected，顾名思义，它可以选择一个项目。单击该项目时效果很好，但是在我的主页上，我希望无需单击即可选择它。

我已将 Navbar 组件注入到 Home 组件中，并在 Home 构造函数中调用 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;
      }
    }
  }
}

页面显示正常，但未选择该项目。没有错误，所以该方法似乎被调用了。

为什么没有选择项目？

Answer 1

你不能像这样将子组件注入到父组件中。您应该使用@ViewChild 或@Query 引用此组件：

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

小心从组件的providers 属性中删除NavBar。仅将其保存在 directives 属性中。

查看这个问题了解更多详情：

• Angular2 Exception: No provider for Service