Question

使用@angular/router版本3.0.0-beta.2我想构建一个允许我的用户浏览文件系统的应用程序。

以下说明了我想支持的网址类型：

http://myapp/browse                   <--- Browse without parameters, lists root dir
http://myapp/browse/animals           <--- Browse "animals" subdirectory
http://myapp/browse/animals/mammals   <--- Browse "animals/mammals" subdirectory

我正在努力想出一种使用RouterConfig来配置它的机制。

路径样式参数

{ path: 'browse/:path', component: BrowserComponent }

此RouterConfig仅支持单个子目录，即browse/animals。但是，如果我尝试浏览到第二级子目录/browse/animals/mammals，我会收到以下错误：

Error: Cannot match any routes: '/browse/animals/mammals'

我理解路由器中参数的默认行为（在这种情况下为:path）是＆＃34; break＆＃34;在第一个正斜杠上，并假设以下标记是一个子路径。

如何配置路由器以允许:path参数接受正斜杠/＆＃34; gobble＆＃34;整个剩余的URL作为参数？

可选参数

如何处理用户希望浏览根目录的用例，即URL /browse。这与上述路由器配置不匹配，因为:path参数不存在。

我试图使用两个明确配置的路由器路径来解决这个问题：

{ path: 'browse', component: BrowserComponent },
{ path: 'browse/:path', component: BrowserComponent }

然而，这导致我routerLinkActive出现问题。我有一个主菜单，其中包含指向浏览器的链接，如下所示：

<a [routerLink]="['/browse']" [routerLinkActive]="['active']">...</a>

如果用户浏览过根active或某个子目录/browse，我希望此主菜单链接包含/browse/animals/类。

但是，如果/browse/animals/网址不是/browse路由的子网，则不会成为active。

我无法使:path参数路由成为/browse根的子节点，因为不需要嵌套视图，并且导致：

Cannot find primary outlet to load BrowserComponent

Answer 1

基于@DaSch的**建议，确实可以使用通配符路径：

{ path: '/browse', component: BrowserComponent, children: [ { path: '**' } ] }

由于子路径上未指定router-outlet字段，因此BrowserComponent内无需嵌套component。

根据需要，现在将为所有描述的URL路由BrowserComponent：

http://myapp/browse
http://myapp/browse/animals
http://myapp/browse/animals/mammals

现在的挑战是获取表示浏览器导航到的路径的URL，并在用户导航时订阅更改。

我使用Router：

制作了原型

router.events.filter(e => e instanceof NavigationEnd)
  .forEach((event: NavigationEnd) => {

    // The root route belongs to "/browse"
    let parentRoot: ActivatedRoute = router.routerState.root.firstChild;
    if (parentRoot.snapshot.url.map(p => p.path).join("/") == "/browse") {

      let path: string = "";

      // Child route is optional, in case the user has browsed to just "/browse"
      let childRoute: ActivatedRoute = parentRoot.firstChild;
      if (childRoute) {
        path = childRoute.snapshot.url.map(p => p.path).join("/");
        console.log("New browser path is ", path);
      }

      this.loadPath(path);
    }
  }
);

Answer 2

我还没试过这个，但是从文档中，我会尝试使用带有通配符选择器的子项。

1KB

它只是猜测，我将不得不检查如何检索路径参数以获得给定路径的正确内容。

Answer 3

你可以这样试试..

只需使用您的第一条路线：{ path: 'browse', component: BrowserComponent }

对于使用所谓optional routes的文件夹名称。

链接应该具有以下语法：

<a [routerLink]="['/browse', ['f1', 'f2', 'f3', 'f4'] ]">--link name--</a>

或者像这样：

<a [routerLink]="['/browse', { folders: ['f1', 'f2', 'f3', 'f4'] } ]">--link name--</a>

将private _route: ActivatedRoute注入到Component的构造函数中并订阅params：

this._route.params.subscribe(
      val => console.log(val),
      err => console.log(err));

第一个会打印出来：Object {0: "f1", 1: "f2", 2: "f3", 3: "f4"} 第二个将打印出这个：Object {folders: "f1,f2,f3,f4"}

或者你可能会想到使用这个optional parameters gl来添加文件夹的想法！：）

Answer 4

您可以动态配置路由器，如https://stackoverflow.com/a/38096260/217408

中所述

router.resetConfig([
 { path: 'team/:id', component: TeamCmp, children: [
   { path: 'simple', component: SimpleCmp },
   { path: 'user/:name', component: UserCmp }
 ] }
]);

https://github.com/angular/angular/issues/11437#issuecomment-245995186提供 RC.6 Plunker

Answer 5

对于我来说，在我的应用程序的自定义逻辑中使用新的路径规则router.resetConfig()可以很有用。

Angular2路由路径样式参数

路径样式参数

可选参数

5 个答案: