使用角度观察变量

Question

我有一个名为loading( 的变量false位于开头，是一个布尔变量）的变量和一个按钮，其文本取决于该变量。

\n\n

我写了一个方法来为我做到这一点，如下所示：

\n\n

changeBtnTxt() {\n  this.loginBtn = this.loading ? \'please wait\':\'login\';\n}\n

\n\n

现在，我想知道如何观察该变量的变化以使用RxJSObservable 观察该变量的变化以触发此方法。

\n\n

这是我的组件

\n\n

export class LoginFormComponentComponent implements OnInit {\n  loading = false;\n  loginBtn = \'\xd9\x88\xd8\xb1\xd9\x88\xd8\xaf\';\n  loginModel: LoginFormModel = new LoginFormModel();\n\n  @ViewChild(\'loginForm\') form: any;\n\n  constructor(private service: LoginFormService,\n    private basicView: BasicViewService) {}  // inject services to our component\n\n  ngOnInit() {}\n\n  login() {\n    this.loading = true;\n    this.changeBtnTxt(); // I want to remove this line and do the changes just by above code\n    this.service.loginModel = this.loginModel;\n    this.service.doLogin() // returns a Http get Observable\n      .subscribe(\n        res => {\n        },\n        msg => {\n          if (msg.status !== 401) {\n            this.loading = false; // want back to normal without call changeBtnTxt()\n          }\n        });\n    this.form.reset();\n  }\n\n  changeBtnTxt() {\n    this.loginBtn = this.loading ? \'\xd9\x88\xd8\xb1\xd9\x88\xd8\xaf\' : \'\xd9\x84\xd8\xb7\xd9\x81\xd8\xa7 \xd8\xb5\xd8\xa8\xd8\xb1 \xda\xa9\xd9\x86\xdb\x8c\xd8\xaf\';\n  }\n}\n

\n\n

这是它的 html

\n\n

<form novalidate #loginForm="ngForm" (submit)="login()">\n  <div class="ibox-title">\n    <h2 class="font-bold">\xd9\x88\xd8\xb1\xd9\x88\xd8\xaf \xd8\xa8\xd9\x87 \xd8\xad\xd8\xb3\xd8\xa7\xd8\xa8 \xda\xa9\xd8\xa7\xd8\xb1\xd8\xa8\xd8\xb1\xdb\x8c</h2>\n  </div>\n  <div class="ibox-content" style="padding-bottom: 15px;">\n    <div class="form-group">\n      <input type="text" class="form-control" \n        placeholder="\xd9\x86\xd8\xa7\xd9\x85 \xda\xa9\xd8\xa7\xd8\xb1\xd8\xa8\xd8\xb1\xdb\x8c" \n        name="username"\n        [(ngModel)]="loginModel.username"\n        required\n        #username="ngModel">\n    </div>\n    <div class="form-group" style="margin-bottom:0px">\n      <input type="password" class="form-control" \n        placeholder="\xd8\xb1\xd9\x85\xd8\xb2\xd8\xb9\xd8\xa8\xd9\x88\xd8\xb1"\n        name="password"\n        [(ngModel)]="loginModel.password"\n        required\n        #password="ngModel">\n    </div>\n\n  </div>\n  <div class="ibox-footer">\n    <input type="submit" class="btn btn-primary block full-width m-b"\n      [disabled]="loginForm.invalid || loading" [value]="loginBtn"/>\n    <button class="btn btn-sm btn-white btn-block" (click)="showHelp()">\xd8\xb1\xd8\xa7\xd9\x87\xd9\x86\xd9\x85\xd8\xa7</button>\n  </div>\n</form>\n

\n

Answer 1

您可以使用Subject并在构造函数中订阅可观察的...然后添加一个简单的函数来使用next...发出更改，如下所示：

  public myObservable = new Subject<boolean>();

  constructor() {
    this.myObservable.subscribe(val => {
      this.loading = val;
      this.loginBtn = 'loged in';
      alert(this.loading)
    })
  }

  changeBtnTxt() {
    this.loginBtn = 'please wait';
    setTimeout(() => { // Only for demonstration purpose
      const val = (this.loading == true ? false : true);
      this.myObservable.next(val);
    }, 2000);
  }

检查stakblitz 中的工作示例

Answer 2

这是一个想法，您可以使用 getter 和 setter 方法，而根本不必使用 observable：

private _loading: boolean = false;

public get loading(): boolean {
    return this._loading;
}

public set loading(isLoading: boolean) {
    this._loading = isLoading;
    this.changeBtnTxt();
}

然后你就可以loading像普通变量一样使用：

this.loading = true;