角度主题不适用于所有组件

Question

我有一个组件“清单”和一个组件“清单-项目”。清单组件通过ng-for创建清单项目。我还具有一个带有按钮的菜单组件，该组件应该更改清单项目的布局。因此，我有一个带有主题的消息服务，以便两者可以相互通信。

清单组件（HTML）：

<div class="checklist-wrapper">
    <div *ngFor="let listItem of listItems; let i = index">
        <app-checklist-item [item]="listItem"  [index]="i"></app-checklist-item>
    </div>
</div>

消息服务：

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

@Injectable({
  providedIn: 'root'
})
export class MessageService {

  private gridOn$ = new Subject<boolean>();

  constructor() { }

  onSendGridOn(gridOn: boolean) {
    this.gridOn$.next(gridOn);
  }

  getGridOn(): Observable<boolean> {
    return this.gridOn$.asObservable();
  }
}

菜单组件（TS）：

import { Component, OnInit } from '@angular/core';
import { MessageService } from '../services/message.service';

@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.css']
})
export class MenuComponent implements OnInit {

  gridOn = false;

  constructor(private messageService: MessageService) { }

  ngOnInit() {
  }

  onToggleGridMode(){
    this.gridOn = !this.gridOn;
    this.messageService.onSendGridOn(this.gridOn);
  }
}

清单项目组件（TS）：

constructor(private messageService: MessageService) {
    this.subscription = this.messageService.getGridOn().subscribe( () => console.log("works"));
}

我也有一个标头组件。在标题组件中，订阅工作正常。但是对于checklist-item组件和checklist组件，订阅没有执行任何操作。如果我改用行为主题，则它在初始化时可以使用一次，但之后不能使用。

Answer 1

您应该按原样返回this.gridOn$并订阅它，而不要使用.asObservable()，后者基本上是为了防止流源在每个组件中公开可用，而这与您想要的相反。

getGridOn(): Observable<boolean> {
    return this.gridOn$;
}

要详细了解何时使用asObservalbe（）check this thread。