Angular2 路由路径样式参数

Question

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

以下说明了我希望支持的 URL 类型：

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）是在第一个正斜杠上“中断”，并假设以下标记是子路径。

如何配置路由器以允许 :path 参数接受正斜杠/“吞噬”整个剩余 URL 作为参数？

---

可选参数

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

我已尝试使用两个不同配置的路由器路径来解决此问题：

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

但是，这给我带来了routerLinkActive 的问题。我有一个带有浏览器链接的主菜单，如下所示：

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

如果用户浏览到根目录/browse 或某个子目录/browse/animals/，我希望这个主菜单链接具有active 类。

但是，鉴于/browse/animals/ URL 不是/browse 路由的子，它不会变成active。

我不能将:path 参数路由作为/browse 根的子路由，因为不需要嵌套视图，这会导致：

Cannot find primary outlet to load BrowserComponent

Answer 1

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

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

没有必要在BrowserComponent 中嵌套router-outlet，因为子路径上没有指定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

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

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

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

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 注入组件的构造函数并订阅参数：

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() 在我的应用的自定义逻辑中使用了新的路由规则