Question

早上好的伙伴们

我开发了一个小型的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

基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"

如果有人能给我一个好的小费，那会很棒。

和平了！

Answer 1

终于搞定了......

错误发生在HTML中。

我使用带有 href 的 a 元素来路由这些网站。那是假的！ 正确的方法是使用 Routerlink

<强> <德尔> <a href="/site">Site</a>

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

比所有实时循环挂钩都能再次运行！

Angular 2 ngOnDestroy未触发

1 个答案: