Angular 2 ngOnDestroy не запускается

Доброе утро, ребята

Я разработал небольшое приложение angular2-client, в котором есть маршруты. Маршруты создаются так:

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

base-component.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, чтобы вы могли проверить мои версии 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"

Было бы здорово, если бы кто-нибудь дал мне хороший совет.

Мир!


person Enis B    schedule 14.07.2016    source источник
comment
Уничтожить на той же странице внизу, потому что при переходе с одной страницы на другую его проверка на этой странице - все, что можно уничтожить во время навигации.   -  person mayur    schedule 14.07.2016
comment
Если я правильно понял ваш комментарий, вы хотите, чтобы я поместил 2 метода в каждый компонент? Я тестировал и это, тоже не работает. ngOnDestroy не запускается даже в самом компоненте. Если я вас не понял, оставьте, пожалуйста, еще один комментарий!   -  person Enis B    schedule 14.07.2016
comment
проверьте, что я дал plnkr eample для получения дополнительных сведений angular.io /docs/ts/latest/api/core/index/OnDestroy-class.html   -  person mayur    schedule 14.07.2016


Ответы (1)


Наконец то получил ...

Ошибка была в HTML.

Я использовал элемент a с href для маршрутизации по сайтам. Это было неправдой! Правильный способ - использовать Routerlink.

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

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

Тогда все крючки живого цикла снова заработают!

person Enis B    schedule 11.08.2016