Question

我看看Angular 2测试版，我正在努力解决变化检测的工作原理。我做了一个简单的plunkr示例，显示了我遇到的问题。

＆＃13;

//our root app component
import {Component, Injectable} from 'angular2/core'

@Injectable()
export class AuthService {
  public state: boolean = true;
  
  change() {
    this.state = false;
    console.log(this.state);
  }
}

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <p>{{state}}</p>
      <button (click)="doLogout()" class="btn btn-success">logout</button>
      <button (click)="changeName()" class="btn btn-success">change name</button>
    </div>
  `,
  directives: [],
  providers: [AuthService],
})
export class App {
  constructor(_auth: AuthService) {
    this.name = 'Angular2';
    this._auth = _auth;
    this.state = _auth.state;
  }
  
  doLogout() {
    this._auth.change();
  }
  
  changeName() {
    this.name = "something else";
  }
}

＆＃13;

当您按下注销按钮时，我将更新AuthService中的状态值。我希望视图能够更新其显示的值，但它应该保持为真，当它应该更新为false。但是，打印的控制台值是正确的。

https://plnkr.co/edit/CJBjRvyO9aSV0SSHm66R?p=preview

有人可以解释为什么它不起作用，以及我如何解决它。

Answer 1

在创建this.state组件时，您只在构造函数中分配App一次。后来的变化没有反映出来。

您可能希望绑定到<p>{{_auth.state}}</p>或订阅服务中的EventEmitter，并在每次在服务中更新值时更新state。有关示例，请参阅Plunker。

Answer 2

这不是一个有角度的问题。 Angular检测引用中的更改，这不是引用：

this.state = _auth.state;

由此改变：

{{_auth.state}}

服务中的角度2变化检测

2 个答案: