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

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

有关详细信息，请参阅此问题：

Angular2 Exception: No provider for Service

类方法不工作Angular 2 Typescript

1 个答案: