角2：サービスを介してテンプレートの変数を正しく変更する方法は？

Question

コンポーネントのプロパティを使用して、HTML要素の状態を動的に変更することはできません。

@Component({ 
    selector: 'home-page', 
    templateUrl: 'home.component.html', 
    styleUrls:['home.component.scss'], 
    providers:[AuthService] 

}) 

export class HomeComponent implements OnInit { 
    public isAuth: boolean; 

    constructor(private auth: AuthService) { 

    ngOnInit() { 
     this.isAuth = this.auth.temp; 
     console.log(this.isAuth); 
    } 
} 

私のAuthServiceはここにある：私はボタンをクリックしたときに

@Injectable() 
export class AuthService { 

    public activeUser:ReplaySubject<any> = new ReplaySubject(); 
    dataBoolean$ = this.activeUser.asObservable(); 

    set signIn(val: boolean) { 
     console.log("sign-in"); 

     Observable.of(val).subscribe 
     (
      res => { 
       this.activeUser.next(res); 
       console.log("SIGNIN >>>>> ", res); 
       this.temp = res; 
      } 
     ); 
     console.log("temp", this.temp); 
    } 
} 

OKは、サインイン（）のコードは正常に動作します。私はサービスからのコンソールの出力を参照して、コンポーネントから。

しかし、私のテンプレートで、私はこれを持っている：

<button [disabled]="isAuth">Pull</button> 

私が観測は、新しい価値を発するとき、私はすぐにテンプレートに表示されなければならない部品やコンポーネントの新しいプロパティでこれを取得することを検討してください。でも、この方法で

：

setInterval(() => { 
      this.isAuth = !this.isAuth; 
      console.log(this.isAuth); 
     }, 2000); 

ボタンは、彼女の状態を変更することはできません。

しかし、それは真実ではないか、私は何か間違っています。

Answer 1

角度2 変化検出はzonesに変化を検出する使用されます。あなたは（setIntervalのように）、タイマーを使用する場合たとえば、あなたは、このような方法でそれをしなければならない。

setInterval(() => { 
    this.isAuth = !this.isAuth; 
    console.log(this.isAuth); 
    this.cd.detectChanges(); 
}, 2000); 

this.cdプロパティとは何ですか？あなたがそれをしなければならない理由

constructor(private cd : ChangeDetectorRef) {} 

しかし：それは注入さChangeDetectorRefのですか？角度2では、変更検出器がNg2にビューの更新時期を伝える役割を担うためです。

があり、あなたはそれについて多くのことを読むことができます： `isAuth`は一度だけ

http://blog.thoughtram.io/angular/2016/02/01/zones-in-angular-2.html