Question

我们有一个使用RouterModule的Angular 2应用程序。我们写了一个简单的服务，如下所示：

Collection View Interface

我们有一个名为＆＃39; BaseStepComponent＆＃39;的组件，它使用ActionService：

//imports...
@Injectable()
export class ActionService {

    actionClick: EventEmitter<any> = new EventEmitter();
    click() {
        this.actionClick.emit();
    }

    getActionEmitter() {
        return this.actionClick;
    }
}

BaseStepComponent是其他组件的基类，FirstStepComp和SecondStepComp。我们的问题是每次我们在这两个组件之间导航时，另一个观察者被添加到actionService，但是取消订阅似乎不起作用。假设我们在每次导航（包括第一次）之后调用ActionService.click（），我们希望每次都能看到一条日志消息。但在第二次导航后，我们会看到两条消息，第三条导航后的三条消息，依此类推。我们试着打电话给

//imports...
export class BaseStepComponent{
    subscription;

    constructor (protected actionService: ActionService){
        this.subscription = this.actionService.getActionEmitter()
        .subscribe(() => this.actionClicked())
    }

    actionClicked() {
        console.log("Action Clicked!");
    }

    ngOnDestroy() {
        this.subscription.unsubscribe();
    }
}

来自孩子们的ngOnDestroy，但它并没有奏效。我们缺少什么？
谢谢！

更新 - 我们的路由

以下是我们如何配置路由：我们有一个名为ProgressComponent的组件：

super.ngOnDestroy()

ProgressComponent的HTML模板：

{path: 'progressComp/:step', component: ProgressComponent},
//other routes...

为了推进步骤，ProgressComponent.ts使用新的步骤编号导航到自身：

<FirstStepComp *ngIf="curStep == 1">...</FirstStepComp>
<SecondStepComp *ngIf="curStep == 2">...</SecondStepComp>

只是为了澄清 - 我们有其他使用ActionService的组件，而unsubscribe（）通常在那里工作。

Angular2 - 取消订阅不使用路由和继承

更新 - 我们的路由

0 个答案: