在 Angular 网站上,他们有一个父子组件使用 @Output() onVoted = new EventEmitter<boolean>();
相互交谈的示例。 .见下文。
在这个给定的示例中,您是否需要取消订阅 EventEmitter 以防止内存泄漏/膨胀?还是框架会为您处理这些?
组件交互/src/app/voter.component.ts
import { Component, EventEmitter, Input, Output } from '@angular/core';
@Component({
selector: 'app-voter',
template: `
<h4>{{name}}</h4>
<button (click)="vote(true)" [disabled]="voted">Agree</button>
<button (click)="vote(false)" [disabled]="voted">Disagree</button>
`
})
export class VoterComponent {
@Input() name: string;
@Output() onVoted = new EventEmitter<boolean>();
voted = false;
vote(agreed: boolean) {
this.onVoted.emit(agreed);
this.voted = true;
}
}
组件交互/src/app/votetaker.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-vote-taker',
template: `
<h2>Should mankind colonize the Universe?</h2>
<h3>Agree: {{agreed}}, Disagree: {{disagreed}}</h3>
<app-voter *ngFor="let voter of voters"
[name]="voter"
(onVoted)="onVoted($event)">
</app-voter>
`
})
export class VoteTakerComponent {
agreed = 0;
disagreed = 0;
voters = ['Mr. IQ', 'Ms. Universe', 'Bombasto'];
onVoted(agreed: boolean) {
agreed ? this.agreed++ : this.disagreed++;
}
}
最佳答案
如果您在 Angular 网站上看到示例并且他们没有取消订阅,那么您认为您为什么应该取消订阅?
Angular 会处理它。
当它创建指令实例时,它会订阅输出:
if (def.outputs.length) {
for (let i = 0; i < def.outputs.length; i++) {
const output = def.outputs[i];
const subscription = instance[output.propName !].subscribe(
eventHandlerClosure(view, def.parent !.nodeIndex, output.eventName));
view.disposables ![def.outputIndex + i] = subscription.unsubscribe.bind(subscription);
当它销毁组件时,它也会自动取消订阅输出订阅:
export function destroyView(view: ViewData) {
...
if (view.disposables) {
for (let i = 0; i < view.disposables.length; i++) {
view.disposables[i]();
所以每次你销毁你的指令时,angular 都会为你处理所有订阅。
但是,如果您在代码中手动订阅 EventEmitter
,那么您必须自行取消订阅。
关于angular - 是否需要取消订阅@Output EventEmitter,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48759538/