Angular 10 个匹配器 children 未显示 children

Question

我正在尝试创建这样的路由模式：

/element << -- 显示元素列表

/element/1 <<-- 显示元素 1 的详细信息

/element/1/child <<-- 显示元素 1children 的列表

我尝试了路径属性“:id”和“child”，但是 children 和 url 都不行，我将其更改为使用匹配器，首先 url 正确更改为 /element/1/child 但显示的组件是 parent 即使 children matcher 与 url 一起工作并且消耗也很好。

我还需要做其他事情吗？还是数学有问题？

const routes: Routes = [
  {
    path: "",
    children: [
      { path: "", redirectTo: "/base", pathMatch: "full" },
      {
        path: "base",
        component: BaseComponent
      },
      {
        // path: ":id",
        matcher: (url) => {
          return url.length === 1
            ? {
                consumed: url.slice(0, 1),
                posParams: { id: new UrlSegment(url[0].path, {}) }
              }
            : { consumed: [] };
        },
        component: ParentComponent,
        children: [
          {
            // path: "child",
            matcher: (url) => {
              const result =
                url.length > 0
                  ? {
                      consumed: url,
                      posParams: { parentId: new UrlSegment(url[0].path, {}) }
                    }
                  : null;
              console.log("children entered", url); // it's entering
              console.log("consumed", result); // and consuming ok
              return result;
            },
            component: ChildrenComponent
          }
        ]
      }
    ]
  }
];

示例代码：https://codesandbox.io/s/cool-star-nr67j?file=/src/app/app.module.ts

Answer 1

唯一缺少的是parent.component.html中的router-outlet:

    <div>--- Parent ({{ id }}) ---</div>
    <div><a routerLink="/">Back</a></div>
    <a routerLink="/1/child">Child</a>

    <router-outlet></router-outlet>

有很多关于为什么需要这样做的原因，但是 经验法则 是路由配置中的组件也有子组件 property必须至少有一个 router-outlet。至少，因为您也可以指定网点。

CodeSandiox demo.

Angular 10 个匹配器 children 未显示 children

Angular 10 matcher children not showing children

children

angular

angular-router

angular10