如何在模板中使用注入的服务(Angular2)

mes*_*lds 6 angular

零件

templateUrl : 'home.html'
..
providers:      [NavService]
..    
private navService:     NavService,
..
Run Code Online (Sandbox Code Playgroud)

模板

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

<span class="name">{{navService[state].name}}</span>
Run Code Online (Sandbox Code Playgroud)

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

Thi*_*ier 10

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

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

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

  • 奖励积分问题 - 是否应该直接从模板中调用服务公共属性?或者这是反模式? (13认同)
  • 对于@pootzko:这种注入公共服务并在模板中访问它的方法似乎是可行的(而不是一种反模式),因为它已在Angular官方文档(《 Tour of Heroes》教程)中证明为一种技术:https: //angular.io/tutorial/toh-pt4 (4认同)
  • 我真的很想知道这一点. (3认同)