如何获得角度2中的当前路线自定义数据？

问题描述：

const appRoutes: Routes = [ 
    { 
    path: 'login', 
    component: LoginComponent, 
    data: { 
     title: 'Login TTX' 
    } 
    }, 
    { 
    path: 'list', 
    component: ListingComponent, 
    data: { 
     title: ' TTX Home Page', 
     module:'list' 
    } 
    }, 
    { 
    path: '', 
    redirectTo: '/login', 
    pathMatch: 'full' 
    }, 
];

现在

当i到'/list'路线来然后'listing.component.ts'我写下面的代码

export class ListingComponent { 

    public constructor(private router:Router) { 
     //here how i can get **data** of **list** routes 

    } 
}

貌似http://*.com/questions/38644314/changing-the-page-title-using的DUP工作对我来说-the-angular-2-new-router/38652281＃38652281 –

答

public constructor(private route:ActivatedRoute, private router:Router) { 
     console.log(route.snapshot.data['title']); 
    }

问题是这条路由不是最终路由所必需的，它是一个嵌套树。这真的取决于你把这件作品放在哪里，然后你就在这里玩你的运气。 – windmaomao

这并不总是会给你正确的结果，因为它取决于你放置的位置。 – asmmahmud

对，如果你没有将它添加到当前路由添加的组件中，则需要遍历路由树以使所需的段能够访问数据。 –

答

后我测试的各种方案中，所述角支持组答案很好地解决了这个问题。

ActivatedRoute doesn't carry data，这里是检测data: { page: 'login' }内页面变量的解决方案。

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

export class AppComponent { 
    page = ''; 
    constructor(private router: Router) { 
    // listen to page variable from router events 
    router.events.subscribe(event => { 
     if (event instanceof RoutesRecognized) { 
     let route = event.state.root.firstChild; 
     this.page = 'page-' + route.data.page || ''; 
     console.log('Page', this.page); 
     } 
    }); 
    } 
}

答

角形4+

如果你把像AppComponent父或上层部件下面的代码，那么它不会工作。它仅适用于您已为其定义的路径的自定义数据的儿童或者更低级别的组件：如果你想从父或上层部件全球访问路径的自定义数据访问的变化

public constructor(private route:ActivatedRoute, private router:Router) { 
     console.log(route.snapshot.data['title']); 
    }

所以，在路由自定义数据中，您必须听取路由器事件，尤其是RoutesRecognized或NavigationEnd事件。我要告诉与AppComponent两个程序有两个事件：

第一种方法：

export class AppComponent implements OnInit, AfterViewInit { 

    constructor(private activatedRoute: ActivatedRoute, private router: Router) { } 

    ngOnInit() { 
     this.router 
     .events 
     .filter(event => event instanceof NavigationEnd) 
     .map(() => { 
      let child = this.activatedRoute.firstChild; 
      while (child) { 
      if (child.firstChild) { 
       child = child.firstChild; 
      } else if (child.snapshot.data && child.snapshot.data['custom_data']) { 
       return child.snapshot.data['custom_data']; 
      } else { 
       return null; 
      } 
      } 
      return null; 
     }).subscribe((customData: any) => { 
      console.log(customData); 
     }); 
    } 
}

第二种方法是使用：

this.router.events 
.filter(event => event instanceof RoutesRecognized) 
.map((event: RoutesRecognized) => { 
    return event.state.root.firstChild.data['custom_data']; 
}) 
.subscribe(customData => { 
    console.log(customData); 
});

注：即使最后一个更短，通常工作，但是，如果你有嵌套的路线，那么鼓励使用第一个。

太棒了，你的第一个方法帮了很大忙。谢谢！对于其他人：您必须导入“rxjs/add/operator/filter”和“rxjs/add/operator/map”才能使其工作 –

答

这app.component.ts（NG 5）

constructor(
    private router: Router, 
) { 

router.events.subscribe((routerEvent: Event) => { 
     this.checkRouterEvent(routerEvent); 
    }); 
} 

checkRouterEvent(routerEvent: Event): void { 
    if (routerEvent instanceof ActivationStart) { 
     if (routerEvent.snapshot.data.custom_data) { 
      this.currentpage = routerEvent.snapshot.data['custom_data']; 
      console.log('4.' + this.currentpage); 
     } 

    }

如何获得角度2中的当前路线自定义数据？

相关推荐