组件间通信的行为主体

使用入站属性(@Input) 和EventEmitter (@Output)可以轻松地在各个组件中进行传输。 Muitas vezes isso é suficiente, porém, podemos passar por alguns 问题：

• E se quiséssemos alterar o dado da variável que estamos passando via inbound property？ Teríamos que renderizar o Componente novamente？
• 是不是要执行逻辑推理来检测武器是否没有勇气？
• E se o Componente filho alterar esse bado？一个替代方案 é criar um "caminho de volta" para avisar o componente pai？
• 是否存在某种形式的集中化方式？

解决问题的另一种方法是使用行为主题来解决常见问题。EventEmitter的功能，主要是作为Observable 的实例和初始值。通过入站属性或集中式服务响应的行为主体可以通过通信、格式、各种组件来增加（订阅），以实现真正的勇气。

摘要

任何组件或服务、行为主体的开发和实例都是组件或服务的主要部分。BehaviourSubject的新价值采用next()方法。 com o subscribe()， Podemos 检测器可以更改。在使用subscribe()之前，可以获取一定的实际价值，并通过使用BehaviorSubject的算法变量或访问属性值：nomeBehaviorSubject.value。没有模板 html 可以使用异步管道：nomeBehaviorSubject |异步。

在实践中

详细说明如下，并没有最终的说明，以实践为例。主要组成部分、组成部分的结尾、发射值和结尾：

BehaviorSubject 通过入站属性

如果应用程序组件是“组件”，则可以通过BehaviorSubject实例的响应来响应以下组件：

export class AppComponent {
  nomeBehaviorSubjectPai= new BehaviorSubject<string>("Felipe");
}

有 2 个组件，emissor.component和Visualizador.component。通过入站属性接收nomeBehaviorSubjectPai 的信息。 定义 um 输入 para ambos。不需要应用程序组件来实例化BehaviorSubject：

@Input() nomeBehaviorSubject: BehaviorSubject<string>;

<div class="row">
  <div class="col-6 border">
    <app-emissor class="m-1" [nomeBehaviorSubject]="nomeBehaviorSubjectPai"></app-emissor>
  </div>
  <div class="col-6 border">
    <app-visualizador class="m-1" [nomeBehaviorSubject]="nomeBehaviorSubjectPai"></app-visualizador>
  </div>
</div>

Em emissor.component，mandaremos um novo valor ao nomeBehaviorSubject através do método next()，para isso，criei or método abaixo，que será acionado pelo template：

  enviarViaInput(nome: string) {
    this.nomeBehaviorSubject.next(nome);
  }

完成此操作后，您可以使用BehaviorSubject来接收Visualizador.Component的勇气。 Fiz isso em seu template，conforme código abaixo:
Obs.: não é a única maneira de exibir o valor

<div class="col-12">
  Valor: {{nomeBehaviorSubject | async}}
  <br>
  Recebido {{nomeCount}} vez(es).
</div>

观察 que também estou exibindo o nomeCount。行为主体是一个行为主题，它体现了行为的价值和逻辑的执行力。不， apenas estou contando a quantidade de valores que foram recebidos:

  ngOnInit() {
    this.nomeBehaviorSubjectSubscription = this.nomeBehaviorSubject.subscribe(valor => {
      this.nomeCount++;
    });
  }

BehaviorSubject 通过服务

使用前面的示例，可以使用BehaviorSubject实例的服务criando ，不使用app.service，也可以使用BehaviorSubject的新方法：

export class AppService {
  private musicaServiceBehaviorSubject = new BehaviorSubject<string>(`Dio - Egypt`);

  constructor() { }

  alterarMusica(valor: string) {
    this.musicaServiceBehaviorSubject.next(valor);
  }

  obterMusica() {
    return this.musicaServiceBehaviorSubject;
  }
}

发射器组件接收到注入的服务并通过改变Musica()方法的新方法进行测试

constructor(private appService: AppService) { }

enviarViaService(musica: string) {
  this.appService.alterarMusica(musica);
}

Da mesma forma, o Visualizador.component Também recebe o service por injeção and faz uso do subscribe do BehaviourSubject para executar uma lógica:

ngOnInit() {  
  this.musicaSubscription = this.appService.obterMusica()
    .subscribe(valor => {
      this.musicaCount++;
    });
}

请使用获取 musica()来获取模板的方法。 O get nos Permitirá acessar musica como se fosse uma variável comum de nosso componente, contre demostrado:

get musica(): string {
  return this.appService.obterMusica().value;
}

<div class="row">
    <div class="col-12">
        <h4>Via service</h4>
    </div>
    <div class="col-12">
        Valor: {{musica}}
        <br>
        Recebido {{musicaCount}} vez(es).
    </div>
</div>

Vamos ver funcionando?

建议 abrir em uma nova aba。

Caso queira abrir em nova aba ou não tenha conseguido 可视化或嵌入式，clique aqui。

观察BehaviorSubject中的unsubscribe()问题。 Caso não tenha visto meu post front, nele demostro a importantância disso: Observables: cancelar inscrição (unsubscribe) é importante！