加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

Angular 2 ngOnDestroy未触发

发布时间:2020-12-17 17:35:28 所属栏目:安全 来源:网络整理
导读:早上好 我开发了一个小型的angular2-client-app,它有路由.路由创建如下: app.routes.ts import { provideRouter,RouterConfig } from '@angular/router';import { ContactComponent } from './components/contact.component/contact.component';import { Ho
早上好

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

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"

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

和平了!

解决方法

终于搞定了……

错误发生在HTML中.

我使用带有href的元素来路由网站.那是假的!正确的方法是使用Routerlink

< a href =“/ site”>网站< / a>

< a [RouterLink] =“['/ site']”>网站< / a>

比所有实时循环挂钩都会再次运行!

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读