如何避免重复订阅Angular？

Question

事件发生的地方：

private action: Subject<IActionData> = new Subject();

 apply(data?: IActionData) {
    this.action.next(data);
 }

我有组件 <app-word-block>，其中监听事件：

this.listener.changes().subscribe((res: IActionData) => {
   // Show type here
});

问题是我在页面上重用了这个组件，例如：

<app-word-block type="1"></app-word-block>
<app-word-block type="2"></app-word-block>
<app-word-block type="3"></app-word-block>

因此事件侦听器工作了 3 次。

如何避免 rest of 和 listen only 一个事件？

Answer 1

编辑： 评论后，我误解了你的问题。我之前的回答解决了这个 "My subscription is duplicate when i navigate in my application"，如果您对此感兴趣，请在下面查看。我可以提出一些解决方案：

您可以在 "parent component" 中进行订阅并传递数据在输入指令中
使用服务并在那里进行订阅并在您的组件中检索它。

稍后我会尝试给你举一些例子。

编辑 2： 正如您 post 的评论中所述。如果您在同一模板中多次使用某个组件，则不应订阅该组件中的主题。

家长订阅方式：您应该在父组件中进行订阅。我们没有您的代码，所以我假设您需要向您的组件发送一些数据，我将通过一个粗略的示例向您展示方法。父组件：

ts :

import { Component, OnInit } from "@angular/core";
import { BehaviorSubject } from "rxjs";

@Component({
    selector: "app-parent",
    templateUrl: "./parent.component.html",
    styleUrls: ["./parent.component.scss"]
})
export class ParentComponent implements OnInit {
    private sub;
    private i = 0;
    private subject = new BehaviorSubject<any>(0);
    constructor() {}

    ngOnInit() {
        this.sub = this.subject.subscribe(data => {
            this.i = data;
        });
    }
    click() {
        this.i++;
        this.subject.next(this.i);
    }
    ngOnDestroy() {
        if (this.sub) {
            this.sub.unsubscribe();
        }
    }
}

html :

<app-child  [value]="i" ></app-child>
<app-child [value]="i" ></app-child>
<app-child  [value]="i"></app-child>
<app-child [value]="i" ></app-child>
<!-- button for testing if it works -->
<button (click)="click()">test</button>

子组件： :

import { Component, OnInit, Input } from "@angular/core";

@Component({
    selector: "app-child",
    templateUrl: "./child.component.html",
    styleUrls: ["./child.component.scss"]
})
export class ChildComponent implements OnInit {
    @Input() value;

    constructor() {}

    ngOnInit() {}
}

最后 html 检查值是否通过并同步。

<p>
  {{this.value}}
</p>

上一个答案：

订阅需要退订，否则您将有多个订阅，如您所述。您的组件需要实现 (onDestroy)

   export class YourComponent implements OnInit,OnDestroy

您需要导入它

import { Component, OnInit,OnDestroy } from '@angular/core';

您必须在 var 中设置您的订阅，以便稍后对其进行操作。

    this.sub = this.listener.changes().subscribe((res: IActionData) => {
   // Show type here
});

然后在你的组件中你需要有一个函数 ngOnDestroy();

ngOnDestroy() {
    if (this.sub) { // check if it's defined sometimes you can get some trouble there,
      this.sub.unsubsribe();
    } 
}

您应该注意 life cycle angular 这是 angular 的重要功能。

如何避免重复订阅Angular？

How avoid duplication subscribe Angular?

angular

angular8