web-dev-qa-db-ja.com

angular2のすべてのルート変更で関数を呼び出す方法

私の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（）を呼び出したいのですが、どうすればいいですか？.

angulartypescriptangular2-routing
27
Daniel

このようにメインrouter-outletからactivateメソッドを呼び出すことができます

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

ルートが変更されるたびに呼び出されます。

更新-

同じことを実現するもう1つの方法は、ルーターのイベントをサブスクライブすることです。たとえば、ナビゲーション状態に基づいてフィルターイベントを開始および終了することができます。たとえば、

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 */}
    });
  }
41
Pardeep Jain

ルーターのNavigationEndイベントにサブスクライブし、urlAfterRedirectsメソッドでURLを取得できます。

  • urlAfterRedirectsを条件付きで使用する必要があると思われるため、showAfterLoginを使用することを強くお勧めします。

  • たとえば、/test-pageを/にリダイレクトするとします。 router.urlに依存しています。その場合、アプリは既に/にリダイレクトされますが、router.urlは/test-pageを返し、ここではissueが返されます（'/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;
                    }
                });
    }
}
3
Burak Tasci

以下のようにRoutesでディレクティブを呼び出すことができます：

{ 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;
  }
 }

AuthGuardコンポーネントをapp.module.tsファイルにインポートし、プロバイダーで提供する必要があります。

app.module.ts：

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

参照できます： NgRx Router

Ngrxエフェクトのすべての「Go」アクションをキャッチして、ルート変更の前にするか、このアクションのリデューサーで関数を呼び出しますafterルートが変更されます。

0
kg11