Question

我在我的角度应用程序路由中，我需要在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' }
];

修改

我也尝试过包装路由器插座，但我的内容也被推了，我不知道你在第二张照片上看到了什么。除了你可以看到的bootstrap类之外，我没有任何其他样式。

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>

Angular 4 - 为什么router-outlet元素不包含渲染组件？

1 个答案: