web-dev-qa-db-ja.com

Angular 2親がアクティブ化したルートを取得する

私はこのようなルートの子供を持つルートを持っています：

{
    path: 'dashboard',
    children: [{
        path: '',
        canActivate: [CanActivateAuthGuard],
        component: DashboardComponent
    }, {
        path: 'wage-types',
        component: WageTypesComponent
    }]
}

そしてブラウザで私は次のようなアクティブ化された親ルートを取得したい

Host.com/dashboard/wage-types

/dashboardを取得する方法ですが、Angular 2で、JavaScriptではありませんが、JavaScriptコードも受け入れることができますが、プライマリAngular 2。

angulartypescriptangular-routerangular-activatedroute
7
user4208442

これを行うには、ActivatedRouteの親プロパティを使用します（次のようなもの）。

export class MyComponent implement OnInit {

    constructor(private activatedRoute: ActivatedRoute) {}

    ngOnInit() {
        this.activatedRoute.parent.url.subscribe((urlPath) => {
            const url = urlPath[urlPath.length - 1].path;
        })
    }

}

ここでActivatedRouteからのすべてをより詳細に見ることができます： https://angular.io/api/router/ActivatedRoute

15
peppermcknight

親ルートにスラッシュが1つだけ存在するかどうかを判断することで、親ルートを確認できます。

 constructor(private router: Router) {}

 ngOnInit() {
      this.router.events.pipe(filter(e => e instanceof NavigationEnd)).subscribe((x: any) => {
          if (this.isParentComponentRoute(x.url)) {
            // logic if parent main/parent route
          }
        });
  }

 isParentComponentRoute(url: string): boolean {
    return (
      url
        .split('')
        .reduce((acc: number, curr: string) => (curr.indexOf('/') > -1 ? acc + 1 : acc), 0) === 1
    );
  }
1
Eugen Sunic