Angular 4 - 为什么路由器出口元素不包含渲染组件？

Question

我在我的角度应用程序路由中，我需要在 router-outlet 元素中动态渲染组件。我需要样式 router-outlet 作为渲染组件的容器，但是当我设置他的宽度时，所有内容都会被推送，我发现它不在 router-outlet 中，如图所示。

App-messenger 标签应该在 router-outlet 中。

这是我的家庭组件，其中包含路由器插座：

<div class="container-fluid h-100 d-flex">
  <div class="d-flex h-100">
    <app-navbar class="flex-column h-100 flex-fixed-column-100"></app-navbar>
  </div>
    <router-outlet class="d-flex w-100"></router-outlet>
</div>

和路由器配置：

const appRouter: Routes = [
  { path: '',
    component: AuthComponent,
    children: [
      { path: '', component: SignInComponent },
      { path: 'sign-up', component: SignUpComponent }
    ]},
  { path: 'home', component: HomeComponent,
    children: [
      { path: '', component: MessengerComponent},
      { path: 'posts', component: UsersPostsListComponent },
      { path: 'contacs', component: ContactsListComponent }
    ]},
  { path: '**', redirectTo: '', pathMatch: 'full' }
];

编辑

我也试过 wrap router-outlet，但我的内容也被推送了，我不知道你可以在第二张图片中看到。除了你可以看到的引导类之外，我没有任何其他样式。

Answer 1

这是正常行为。 router-outlet 不是内容的父元素。你需要一些包裹它。

    <div class="container-fluid h-100 d-flex">
      <div class="d-flex h-100">
        <app-navbar class="flex-column h-100 flex-fixed-column-100"></app-navbar>
      </div>
      <div class="d-flex w-100">
        <router-outlet></router-outlet>
      </div
    </div>

编辑： 尝试像这样在 UL 元素上添加 flex-column

<div class="container-fluid h-100 d-flex">
  <div class="d-flex h-100">
    <app-navbar class="flex-column h-100 flex-fixed-column-100">
      <ul class="nav flex-column h-100 side-navbar justify-content-center align-content-start">
        <li class="nav-item">Item 1</li>
        <li  class="nav-item">Item 2</li>
        <li  class="nav-item">Item 3</li>      
      </ul>
    </app-navbar>
  </div>
    <div class="d-flex w-100">
     <router-outlet></router-outlet>
      <div class="w-100">
          Right Content
      </div>
    </div>
</div>