Question

const APP_ROUTES: RouterConfig = [

    {

        path: 'app/home',
        component: HomeComponent,
        data: {
          name: 'Home'
        }

    }


]

如果我有如上所示的路由配置，如何从某个指令访问其data属性。

@Directive({
  name: 'hello'
})

class HelloDirective {
 @Input('routerLink') link: string[];

 ngOnInit() {
    //HOW CAN I GET ROUTE AND ITS DATA FROM PATH/URL ???

    //const magicallyGrabbedRoute = pleaseGiveMeMyRouteFrom(this.link);
    //const myData = magicallyGrabbedRoute.data;

 }

}

<a hello [routerLink]="['app/home']"> Go Home </a>

在hello指令中，如何获取routerLink属性值的路由配置？

Answer 1

（ RC6 ）：您需要导入：

import { ActivatedRoute } from '@angular/router';

然后在你的构造函数中：

constructor(private route: ActivatedRoute) { }

班级应该implements OnInit这样：

ngOnInit() { const myData = this.route.snapshot.data['name']; }

这是为了防止您的网址不是动态的。如果是动态的，您应该使用观察者而不是快照。附：对于父母的父母，只需使用：this.route.snapshot.parent.data['name']

Answer 2

您可以通过将其放入Component类中来订阅路由参数。＆安培;在构造函数中有private route: ActivatedRoute

this.sub = this.route
  .params //.data //--> use data to retrieve route data
  .subscribe(params => {
    console.log(params['id']);
  });

您还可以使用this.route.snapshot.data检索路由定义中传递的数据。

从angular2中的指令访问路由数据

2 个答案: