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次。

如何避免休息并只听一个事件？

Answer 1

编辑： 评论后，我误解了您的问题。如果您对此感兴趣，请在下面的答案中解决：“我在应用程序中导航时我的订阅重复”。我可以提出一些解决方案：

您可以在“父组件”中进行订阅并传递数据在输入指令中
使用服务并在那里进行订阅，然后在您的组件中检索它。

稍后我将尝试为您提供示例。

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

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

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>

子组件： ts：

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？

1 个答案: