Angular 2 ngOnDestroy 未触发答案

【问题标题】：Angular 2 ngOnDestroy is not triggeringAngular 2 ngOnDestroy 未触发
【发布时间】：2016-07-14 08:53:11
【问题描述】：

各位早安

我开发了一个小型 angular2-client-app，它有路线。路线是这样创建的：

app.routes.ts

import { provideRouter, RouterConfig } from '@angular/router';
import { ContactComponent } from './components/contact.component/contact.component';
import { Home } from './components/home.component/home.component';
import {StudentRoutes} from './components/student.component/student.routes';
import {LecturerRoutes} from "./components/lecturer.component/lecturer.routes";
import {ProcessRoutes} from "./components/process.component/process.routes";
import {SchoolRoutes} from "./components/school.component/school.routes";

export const routes: RouterConfig = [
    { path: '', component: Home },
    ...ProcessRoutes,
    ...StudentRoutes,
    ...LecturerRoutes,
    ...SchoolRoutes,
    { path: 'contact', component: ContactComponent }
];

export const APP_ROUTER_PROVIDERS = [
  provideRouter(routes)
];

所以现在我的客户可以从一个组件路由到另一个组件。

我所有的组件都在扩展一个父组件：base-component.ts

基础组件.ts

import { Component, Injectable, Inject, Input, Output, EventEmitter, OnDestroy, OnInit, OnChanges } from '@angular/core';
import { Http, URLSearchParams, Headers, Response, RequestOptions } from '@angular/http';
import { NavigationService } from '../services/navigation-service';
// import {Router } from '@angular/router';
import { ComponentService } from '../services/component-service';
import { MenuItem } from '../models/menu-item';
import { Subscription }   from 'rxjs/Subscription';
import {Broadcaster} from "../services/broadcaster";
import {ScreenSize} from "../models/screen-size";
import {LoaderService} from "../services/loader-service";

@Component({
    selector: 'base-component',
    template: ""
})

@Injectable()
export class BaseComponent implements OnDestroy, OnInit {
    constructor(componentService: ComponentService, 
    protected navigationService: NavigationService, 
    broadcaster: Broadcaster,
    protected loaderSrv:LoaderService, 
    screen:ScreenSize = ScreenSize.TwoColumns) {
        let items = new Array<MenuItem>();
        let parent = componentService.GetParentPath(location.pathname);
        this.navigationService.GetSideNavigation(parent).subscribe((x) => {
            items = x.map(y => new MenuItem(y.name, y.url, y.children))
            broadcaster.broadcast("sideNavigation", items[0].children);
        });
        broadcaster.broadcast("screenSize", screen);
    }

  ngOnDestroy(){
    this.loaderSrv.start();
  }

  ngOnInit(){
    this.loaderSrv.stop(); 
  }
}

每次用户改变路线时，他应该首先点击 ngOnDestroy 方法，因为我的对象被清除了。之后，它应该会触发 ngOnInit 方法，因为我们刚刚通过路由创建了一个新对象。

问题：它从不触发 ngOnDestroy 方法...他确实触发了 ngOnInit-Method，但从不触发 ngOnDestroy...

这是我的 package.json 中的一个 sn-p，因此您可以检查我的 angular2 版本：

"@angular/common": "2.0.0-rc.3",
    "@angular/compiler": "2.0.0-rc.3",
    "@angular/core": "2.0.0-rc.3",
    "@angular/forms": "0.1.1",
    "@angular/http": "2.0.0-rc.3",
    "@angular/platform-browser": "2.0.0-rc.3",
    "@angular/platform-browser-dynamic": "2.0.0-rc.3",
    "@angular/router": "3.0.0-alpha.7",
    "@angular/router-deprecated": "2.0.0-rc.2",
    "@angular/upgrade": "2.0.0-rc.3"

如果有人能给我一个好的建议，那就太好了。

和平！

【问题讨论】：

在底部的同一页面上销毁，因为当它从一个页面导航到另一个页面时，它在该页面上的检查是在导航时可以销毁的任何内容
如果您的评论正确，您希望我将这两种方法放在每个组件中吗？我也测试过，它也不起作用。即使在组件自身中，ngOnDestroy 也不会触发。如果我没有理解你的意思，请发表评论！
检查我已经给了 plnkr 示例以获取更多详细信息angular.io/docs/ts/latest/api/core/index/OnDestroy-class.html

标签： angular routes loader ondestroy

【解决方案1】：

终于明白了……

错误出现在 HTML 中。

我使用元素 a 和 href 来路由通过站点。那是假的！ 正确的方法是使用Routerlink

~~<a href="/site">Site</a>~~

<a [RouterLink]="['/site']">Site</a>

比所有的 live cycle hooks 都会再次起作用！

【讨论】：