Angular 未找到角4路由器子路径（出口）

我对Angular 4路由器和组件有一些问题。我想做的事。我有一个视图（超级用户），其中包含2个oulets（侧菜单和内容）

在路由器中，我有一个超级用户，有两个孩子（侧菜单和内容），有自己的路由器，但我越来越无法匹配任何路由。URL段：uri上的“超级用户/上下文”。来源：贝娄

应用程序路由器

export const routes: Routes = [
  {
    path: "home",
    component: HomeComponent
  },
  {
    path: "superuser",
    component: SuperuserComponent,
    children:[
      {
        path: "",
        component: SideMenuComponent,
        outlet: 'superuser-sidemenu'
      },
      {
        path: "contexts",
        component: ContextsComponent,
        outlet: 'superuser-content'
      }

    ]
  },

  {
    path: "",
    redirectTo: "/home",
    pathMatch: "full"
  }
]

SuperUserComponent.html

<div class="py-5 public-area-body-background">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-2">
        <div id="superuser-sidemenu">
            <router-outlet name="superuser-sidemenu"></router-outlet>
        </div>
      </div>
      <div class="col-md-10">
        <div id="superuser-content">
            <router-outlet name="superuser-content"></router-outlet>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="card text-white p-5 bg-light shadow sidemenu">
    <div class="card-body sidemenu">
      <h4 class="mb-4 text-dark" >Main Menu</h4>
        <div class="input-group">
            <select class="custom-select" id="inputGroupSelect04">
              <option selected>Context...</option>
              <option value="1">One</option>
              <option value="2">Two</option>
              <option value="3">Three</option>
            </select> 
        </div>


    </div>
  </div>

<div class="card text-white p-5 bg-light shadow">
  <div class="card-body">
    <p>Content here</p>
</div>

SideMenuComponent.html

<div class="py-5 public-area-body-background">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-2">
        <div id="superuser-sidemenu">
            <router-outlet name="superuser-sidemenu"></router-outlet>
        </div>
      </div>
      <div class="col-md-10">
        <div id="superuser-content">
            <router-outlet name="superuser-content"></router-outlet>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="card text-white p-5 bg-light shadow sidemenu">
    <div class="card-body sidemenu">
      <h4 class="mb-4 text-dark" >Main Menu</h4>
        <div class="input-group">
            <select class="custom-select" id="inputGroupSelect04">
              <option selected>Context...</option>
              <option value="1">One</option>
              <option value="2">Two</option>
              <option value="3">Three</option>
            </select> 
        </div>


    </div>
  </div>

<div class="card text-white p-5 bg-light shadow">
  <div class="card-body">
    <p>Content here</p>
</div>

主菜单
上下文
一个
两个
三

ContextsComponent.html

<div class="py-5 public-area-body-background">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-2">
        <div id="superuser-sidemenu">
            <router-outlet name="superuser-sidemenu"></router-outlet>
        </div>
      </div>
      <div class="col-md-10">
        <div id="superuser-content">
            <router-outlet name="superuser-content"></router-outlet>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="card text-white p-5 bg-light shadow sidemenu">
    <div class="card-body sidemenu">
      <h4 class="mb-4 text-dark" >Main Menu</h4>
        <div class="input-group">
            <select class="custom-select" id="inputGroupSelect04">
              <option selected>Context...</option>
              <option value="1">One</option>
              <option value="2">Two</option>
              <option value="3">Three</option>
            </select> 
        </div>


    </div>
  </div>

<div class="card text-white p-5 bg-light shadow">
  <div class="card-body">
    <p>Content here</p>
</div>

满足于此

---

谢谢

如果您要实现带有子插座的组件，最好将其作为一个模块。在您的情况下，您可以创建更多文件，例如super-user.module.ts和super-user-routing.module.ts

希望您在app.module.ts中声明所有这些组件。这不是一个好的做法，将来你的应用程序会变慢。因此，从app.module中删除SuperUserComponent、SideMenuComponent和ContextsComponent的声明，并在新的super user.module.ts文件中声明它们。此外，您还可以在superUser内部创建一个新组件，并显示当前SuperUserComponent.html的内容，并且SuperUserComponent.html文件应仅包含一个

将app.router的代码更改为

export const routes: Routes = [
  {
    path: "home",
    component: HomeComponent
  },
  {
    path: 'superuser',
    loadChildren: './super-user/super-user.module#SuperUserModule'      
  },    
  {
    path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  }
]

最后是super-user-routing.module.ts as

export const routes: Routes = [
      {
        path: '',
        component: SuperUserComponet,
        children: [ { path: 'view', component: ListComponent},
        path: 'context', component: ContextSComponent},    
      ...]
    ]

现在，您可以从任何位置访问这些组件，如

routerLink=“/superuser/context”

等。

---

要查看super-user.component.html的当前视图，您需要使用

routerLink=“/superuser/list”

，您应该在此处重新阅读辅助路由指南：。当使用命名出口时，你的url应该是http://.../superuser（超级用户内容：上下文）对不起，我真的不明白。你看过我在之前的评论中链接的文档了吗？多亏了你的链接，我又看了5眼，并成功地使它工作了。可以作为解决方案发布。感谢直到收到您的解决方案，再加上Pierre的评论（文档），感谢Grad了解了这一点