Angular2路由路径样式参数

发布时间：2020-12-17 06:51:28 所属栏目：安全来源：网络整理

导读：使用@ angular / router版本3.0.0-beta.2我想构建一个允许我的用户浏览文件系统的应用程序. 以下说明了我想支持的URL类型： http://myapp/browse --- Browse without parameters,lists root dirhttp://myapp/browse/animals --- Browse "animals" subdirecto

使用@ 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 /浏览.这与上述路由器配置不匹配,因为：path参数不存在.

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

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

但是,这导致了routerLinkActive的问题.我有一个主菜单,其中包含指向浏览器的链接,如下所示：

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

如果用户浏览到root / browse或某个子目录/ browse / animals /,我希望这个主菜单链接有活动类.

但是,如果/ browse / animals / URL不是/ browse路由的子节点,则它不会变为活动状态.

我不能让：path参数路由/ browse根目录的子进程,因为不需要嵌套视图,它会导致：

Cannot find primary outlet to load BrowserComponent

解决方法

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

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

在BrowserComponent中不需要嵌套路由器出口,因为子路径上没有指定组件字段.

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

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

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

我使用路由器对此进行了原型设计：

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);
    }
  }
);

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!