13

我可以使用 location.path() 获取当前路线的路径，例如：/about、/、/news。但是我怎样才能获得它的别名（路由定义中的“as”部分）？

{ path: '/about', as: 'About', component: About }

可能吗？

4

5 回答 5

3

注意：以下内容已在 2.0 beta 系列中进行了测试。RC 版本具有更新的路由器组件，其中包含重大更改。旧的已重命名为router-deprecated. 这尚未针对新路由器进行测试。

以下将打印Foo或Bar取决于您的活动路线。

@Component({
    selector: 'app',
    templateUrl: 'app/app.html',
    directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
  {path:'/', name: 'Foo', component: FooComponent, useAsDefault: true},
  {path:'/bar', name: 'Bar', component: BarComponent, useAsDefault: false},
])
export class AppComponent implements OnInit {
    constructor(private _router: Router) {
    }

    ngOnInit() {
        console.log('current route name', 
                    this._router.currentInstruction.component.routeName);
    }
}
于 2016-05-05T12:41:34.580 回答
2

看不到获取方法，但一种替代方法是使用 RouteData 传递路线的别名

https://angular.io/docs/ts/latest/api/router/RouteData-class.html

于 2015-12-27T12:16:23.947 回答
2

您不应该使用位置，而应该使用路由器实例。

在您的组件中，将其注入构造函数中：

constructor(public router: Router)

比，您可以通过以下方式获取组件的名称：

this.router.currentInstruction.component.routeName

我不确定您如何从路由器配置中获得。但是RouterLink指令应该是正确的开始： https ://angular.io/docs/ts/latest/api/router/RouterLink-directive.html

于 2015-12-27T20:41:10.440 回答
1

对于 >= Angular2 RC.x（新路由器）

新路由器中不再有别名。

可以获取本地组件的相对路由

  routerOnActivate(curr:RouteSegment, prev?:RouteSegment, currTree?:RouteTree, prevTree?:RouteTree):void {
    console.log(curr.stringifiedUrlSegments);
  }

或使用完整路径

constructor(private router:Router) {}

  routerOnActivate(curr:RouteSegment, prev?:RouteSegment, currTree?:RouteTree, prevTree?:RouteTree):void {
    console.log(this.router.serializeUrl(tree));
  }

或者

constructor(router:Router, private location:Location) {
  router.changes.subscribe(() => {
    console.log(this.location.path());
  });
}
于 2016-05-14T17:50:35.380 回答
0

router.generate如果您知道可能的别名列表，则可以使用和的组合找出当前别名的名称route.isActiveRoute：

例如，我有一个包含三个步骤的向导。我有一个数组中的步骤别名列表：

private wizardAliases = [
    'wizardStep1',
    'wizardStep2',
    'wizardStep3'
];

然后我使用以下代码来确定当前的别名：

const alias = this.wizardAliases
    .map(alias => ({ alias, navigationInstruction: this.router.generate([alias]) }))
    .filter(x => this.router.isRouteActive(x.navigationInstruction))
    .map(x => x.alias);

if (alias.length === 1) {
    console.log(`alias is ${alias}`);
}

免责声明：我没有尝试查看这是否适用于路由参数。

于 2016-03-29T13:29:14.270 回答