templates - 在 Angular 2 的 html 模板中引用服务是一种好习惯吗？

Question

正如问题所述，直接在模板中引用服务是否有任何不利之处:

 [disabled]="stateService.selectedClient == null || stateService.currentStep == 1"

在我看来，这似乎不是一个好的做法，我更愿意在需要使用它的任何组件中保留一个“selectedClient”对象。如何在观察变化的同时获取状态并将其存储到局部变量中:

示例:我想通过更改“stateService”中的“currentStep”从 step1 移动到 step2，但是我希望将“currentStep”也保留为局部变量的组件来反射(reflect)状态的变化？

Answer 1

Is it good practice to reference services in html templates in Angular 2?

我通常会避免它。这似乎带来的困惑多于好处。

缺点:

来自 OOP 背景，这种方法看起来打破了 Law of Demeter ，但更重要的是，

它不再是 MVC，您的 Controller (Angular2 的 Component )在其中充当 View 和服务之间的中介。

就像 Ced 说的，如果调用一个服务的成员成本很高，我们需要在 View 中多次引用它怎么办？

目前我选择的编辑器(VS Code)不完全支持 Angular2 模板；在 Component 中引用其自身 template 范围之外的太多东西会使重构不再有趣。

优点:

有时它看起来更优雅(因为它为您节省了 2 行代码)，但相信我，事实并非如此。

How can I get the state and store it into local variables, while observing the changes

Madhu Ranjan 对此有很好的回答。对于您的特定示例，我将尝试使其更完整:

在您的 StateService 中，定义:

currentStep : Subject<number> = new Subject<number>();
selectedClient: Subject<Client> = new Subject<Client>();

changeStep(nextStep: number){          
  this.currentStep.next(nextStep);
}

selectClient(client: Client) {
  this.selectedClient.next(client);
}

在您的 Component 中:

currentStep: number;

constructor(stateService : StateService){
  stateService.currentStep.combineLatest(
    stateService.selectedClient, 
    (currStep, client) => {
      if (client == null) {
        // I'm assuming you are not showing any step here, replace it with your logic
        return -1; 
      }
      return currStep;
    })
  .subscribe(val => {
    this.currentStep = val;
  });
}