类方法不起作用 Angular 2 Typescript

Question

类方法不起作用 Angular 2 Typescript

3

我有一个<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;
      }
    }
  }
}

页面显示正常，但是项目没有被选中。没有错误提示，似乎方法已经被调用。

为什么项目没有被选中呢？

- David Ericsson

导航栏在构造函数中注入，可能是不同的实例吗？ - David Ericsson

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Thierry Templier · Accepted Answer

您不能像这样将子组件注入到父组件中。您应该使用@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