angular - 与异步管道(Angular)的混淆行为

Question

我将尝试使用异步管道来显示/隐藏一些等待消息。

app.component.html

<ng-template #isWait>
    <h1>Please wait</h1>
</ng-template>

<div *ngIf="wait | async; else isWait">
    <hello name="{{ name }}"></hello>

    <p>
        Start editing to see some magic happen :)
    </p>

</div>

<button (click)="toggle()">Toggle</button>

<!-- Doesn't change -->
<div style="margin:1rem;">
    Doesn't change here
    <span style="color:red;">Value is {{wait | async}}</span>
  (AppComponent)
</div>

app.component.ts

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name: string = 'Angular 5';
  wait: Observable<boolean>;

  constructor(public waitService: WaitService) {
    this.wait = this.waitService.wait;
  }

  toggle() {
    this.waitService.toggle();
  }
}

等待.service.ts

export class WaitService {
  wait: Observable<boolean>;
  private _wait: boolean = false;
  private _onChange: EventEmitter<boolean> = new EventEmitter();

  constructor() {
    this.wait = Observable.create((obs: any) => {
      obs.next(this._wait);
      this._onChange.subscribe((w: boolean) => {
        if (this._wait !== w) {
          this._wait = w;
          obs.next(this._wait);
        }
      });
    });
  }

  toggle() {
    this._onChange.emit(!this._wait);
  }
}

我有 WaitService 和 等待 属性和方法 切换 用于切换等待。
当我尝试切换时 等待 ，它在一种情况下有效，但对彼此不起作用(正如我所料)。

所以，这让我很困惑。
我会试着弄清楚，为什么会这样。

示例: https://stackblitz.com/edit/angular-fwghfj

如果您点击切换按钮，等待消息不会发生任何事情，但订阅 Wait2Component每次单击切换时都会发出并写入控制台输出。

但是在订阅评论行后，显示和隐藏等待消息将可以正常工作，但在其他地方 等待 仍然没有变化。

我当然可以改 等待 bool 值，不关心这种情况 异步 ，但这对我来说是意想不到的行为。

Answer 1

你可以这样写WaitService:

import { Injectable } from "@angular/core";
import { BehaviorSubject } from "rxjs/BehaviorSubject";

@Injectable()
export class WaitService
{
    private readonly isWaiting = new BehaviorSubject(false);
    public readonly wait$ = this.isWaiting.asObservable();
    public toggle()
    {
        this.isWaiting.next(!this.isWaiting.value);
    }
}