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参数接受正斜杠/"gobble"整个剩余的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/URL不是/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

我没有尝试过这个,但是从文档中,我会尝试使用带有通配符选择器的子节点.

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

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