角10个匹配器子项未显示子项

如何解决角10个匹配器子项未显示子项

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

/ element

/ element / 1

/ element / 1 / child

我尝试了路径属性“：id”和“ child”，但它对子项无效，无论是url还是URL，我都将其更改为使用匹配器，首先将url正确更改为 / element / 1 / child ，但是即使子级匹配项使用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

解决方法

唯一缺少的是 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.