如何在模板中使用注入的服务（Angular2）

Question

组件

templateUrl : 'home.html'
..
providers:      [NavService]
..    
private navService:     NavService,
..

模板

 <li *ngFor="let state of states; let i=index" 
[class.active]="navService.isCurrentState(state)">

<span class="name">{{navService[state].name}}</span>

似乎不起作用，我在这里缺少什么？如何在组件模板中访问我的服务？

Answer 1

组件类中定义的每个属性都可以在模板中使用。

首先，您可以检查navService是否具有正确的值：

@Component({
  (...)
  providers: [NavService]
})
export class SomeComponent {
  constructor(public navService: NavService) {
    console.log(navService); // <----
  }
}

Answer 2

代码的问题是您将服务声明为私有。 根据文档（angular.io/tutorial/toh-pt4）：“ messageService属性必须是公共的，因为您将在模板中绑定到它”。 如果您将其更改为costructor中的public，则可以使用模板中的服务。