Angular 4 - Почему элемент маршрутизатора-розетки не содержит визуализированного компонента?

В моем приложении angular есть маршрутизация, и мне нужно динамически отображать компоненты в элементе 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' }
];

ИЗМЕНИТЬ

Я также пробовал обернуть роутер-розетку, но мой контент был отправлен, и я не знал, как вы можете видеть на втором рисунке. У меня нет других стилей, кроме классов начальной загрузки, которые вы видите.

введите здесь описание изображения


javascript angular router-outlet angular-router
person Denis Stephanov    schedule 07.09.2017    source источник
comment
Вот как работает router-outlet: поместите контейнер-обертку вокруг router-outlet и задайте стиль,   -  person Toxicable    schedule 07.09.2017
comment
Вам нужна обертка вокруг роутера   -  person Vamshi Gudipati    schedule 07.09.2017

Ответы (1)


arrow_upward
0
arrow_downward

это нормальное поведение. 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 следующим образом

<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>
person wheeler    schedule 07.09.2017
comment
проверьте мое обновление, пожалуйста, я попробовал, и не работает, пустая область меньше, но все еще есть. - person Denis Stephanov; 07.09.2017
comment
может быть, да, но на самом деле я пытаюсь решить эту проблему, потому что не хочу смешивать это в одном протекторе. - person Denis Stephanov; 07.09.2017
comment
Я считаю, что класс навигации в ‹ul› компенсирует ширину. Попробуйте удалить плз. - person wheeler; 07.09.2017