角度2：更新服務變量和視圖

Question

我有一個名為ValueService的服務，該服務的值為0。然后，我有一個導航組件和一個標題組件。 valueService中的值不會在單擊時更新標題視圖。 我剛接觸過Angular 2，所以我不確定如何使它正常工作。 這是我到目前為止所擁有的。 謝謝你的幫助。

價值服務

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Rx';

@Injectable()
export class ValueService {
value:number;

 constructor() {
   this.value = 0;
 }

  goTo(value){
   this.value = value;
   console.log('value in service', this.value);
  }   

導航組件模板

<button *ngFor="let d of array | keys; let i = index" (click)="valueService.goTo(i)"> {{ i }} </button>

標題組件模板

問題在這里。 我只想顯示由nav組件中的按鈕索引選擇的h3，但是由於某種原因，它保持設置為默認值0，並且不會更新該值。

<h3 *ngIf="i==valueService.value" *ngFor="let d of array | keys; let i = index"> {{ text here }} </h1>

Answer 1

您的服務和導航組件看起來不錯。

您可能會遇到這樣的問題：在標題組件中有2個綁定，並且ngIf中的i未定義或未綁定到for循環。 我將順序明確，看看是否有幫助。

<template ngFor let-d [ngForOf]="array" let-i="index">
    <h3 *ngIf="i==valueService.value">
        {{ text here }}
    </h3>
</template>

您還會遇到一個錯誤，即您的h3標簽用h1關閉了，因此angular甚至不應該編譯它並在控制台中抱怨它。

Answer 2

我最終在json文件中設置了全局變量，並更新了該值。 它還更新了同級組件中的值。