更新 -

Question

我的module.ts，

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule,Router }   from '@angular/router';
import { AppComponent }  from './crud/app.component';
import { Profile }  from './profile/profile';
import { Mainapp }  from './demo.app';
import { Navbar }  from './header/header';
// import {ToasterModule, ToasterService} from 'angular2-toaster';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({

  imports:      [ BrowserModule,FormsModule, ReactiveFormsModule ,
  RouterModule.forRoot([
      { path: '', component:AppComponent},
      { path: 'login', component:AppComponent},
      { path: 'profile', component:Profile}
    ]) ],
  declarations: [ AppComponent,Mainapp,Navbar,Profile ],
  bootstrap:    [ Mainapp ]
})
export class AppModule { 

}

在这里，我想在每次改变路线时从main.ts调用一个函数，我怎么能这样做。任何人都可以帮助我。谢谢。我的mainapp.ts，

    export class Mainapp {

    showBeforeLogin:any = true;
    showAfterLogin:any;
    constructor( public router: Router) {
     this.changeOfRoutes();

     }
     changeOfRoutes(){
      if(this.router.url === '/'){
         this.showAfterLogin = true;
      }
     }
}

我想为每次路线更改调用此changeofRoutes（），我该怎么做？有人可以帮助我。

Answer 1

您可以像这样<{p>}从主activate调用router-outlet方法

<router-outlet  (activate)="changeOfRoutes()"></router-outlet>

每次路线改变时都会打电话。

更新 -

实现相同的另一种方法是订阅路由器事件，即使你可以根据导航状态过滤它们可能是开始和结束左右，例如 -

import { Router, NavigationEnd } from '@angular/router';

  @Component({...})
  constructor(private router: Router) {
    this.router.events.subscribe((ev) => {
      if (ev instanceof NavigationEnd) { /* Your code goes here on every router change */}
    });
  }

Answer 2

您可以订阅路由器的NavigationEnd事件，并使用urlAfterRedirects方法检索网址。

我强烈建议您使用urlAfterRedirects，因为您似乎需要有条件showAfterLogin。
假设您正在将/test-page重定向到/;你依靠router.url。在这种情况下，应用已经重定向到/，但router.url会返回/test-page，此处问题会来（'/test-page' != '/'）。

只需在构造函数中进行以下更改：

export class Mainapp {
    showBeforeLogin:any = true;
    showAfterLogin:any;

    constructor(public router: Router) {
        this.changeOfRoutes();

        this.router.events
            .filter(event => (event instanceof NavigationEnd))
                .subscribe((routeData: any) => {
                    if(routeData.urlAfterRedirects === '/') {
                        this.showAfterLogin = true;
                    }
                });
    }
}

Answer 3

你可以在下面的路线中调用指令：

{ path: 'dashboard', component: DashboardComponent , canActivate: [AuthGuard] },

您的AuthGuard组件如下所示：

<强> auth.guard.ts

import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot, 
RouterStateSnapshot } from '@angular/router';

@Injectable()
export class AuthGuard implements CanActivate {

constructor(private router: Router) { }

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) 
{
    if (localStorage.getItem('currentUser')) {
        // logged in so return true
        return true;
    }

    // not logged in so redirect to login page with the return url
    this.router.navigate(['/home'], { queryParams: { returnUrl: 
 state.url }});
    return false;
  }
 }

您应该在app.module.ts文件中导入AuthGuard组件，并且应该在提供者中提供：

<强> app.module.ts：

......... Your code.......... 
import { AuthGuard } from './_guards/index';
..........Your code..............
  providers: [
    AuthGuard,
    ........
],

Answer 4

您可以参考：NgRx Router

在ngrx效果中捕获所有“执行”操作以在路由更改之前执行，或者在此操作的简化器中在路由更改之后调用函数。

如何在angular2中的每个路径变化上调用一个函数

4 个答案:

更新 -