Угловая маршрутизация не показывает контент - PullRequest
Новая
       7

Угловая маршрутизация не показывает контент

0 голосов
/ 27 сентября 2018

Я хотел реализовать маршрутизацию таким образом, чтобы, если вы щелкнете по раскрывающемуся списку, он перейдет на эту конкретную страницу.Но я хочу, чтобы заголовок оставался при маршрутизации к другим компонентам. Он идет по конкретному URL, но не показывает содержимое. Я пробовал дочернюю маршрутизацию, но, похоже, она не работает.

Вышеприведенное изображение выглядит так, как выглядит выпадающий список.Он имеет следующий URL

localhost: 4200 / body

, когда я нажимаю на управление пользователями, я хочу перейти на

localhost: 4200 / body / user

Несмотря на то, что он идет по определенному URL, он не отображает содержимое ниже , как на рисунке.

Это мои коды (app.routing.ts и .html)

Ответы [ 3 ]

0 голосов
/ 27 сентября 2018

Если у вас есть вложенные маршруты, у вас должен быть выход для вложенного маршрутизатора: 

{ path: 'user', component: LoginViewComponent,
    children: [
      { path: 'catalog', component: CatalogViewComponent },
      {
        path: 'home',  component: HomeViewComponent,
      }
    ]
},      
{ path: '**', redirectTo: 'user' }

Тогда: 

<div class="container">
    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
      <span class="caret"></span></button>
      <ul class="dropdown-menu">
        <li><a routerLinkActive="active" 
          routerLink="/user">Login</a></li>
        <li> <a routerLinkActive="active" 
          routerLink="/user/home">Home</a></li>
        <li> <a routerLinkActive="active" 
          routerLink="/user/catalog">Catalog</a></li>
      </ul>
    </div>
    <router-outlet></router-outlet>
  </div>

А в вашем дочернем компоненте: 

<h1>Login</h1>
<router-outlet></router-outlet>

Я создал рабочий пример здесь .

0 голосов
/ 28 сентября 2018

Я думаю, что вы забыли добавить <router-outlet></router-outlet> в ваш BodyComponent html.добавь это все твой код вроде нормально

0 голосов
/ 27 сентября 2018

Accordinh tonthe doc 

const crisisCenterRoutes: Routes = [   {
    path: 'crisis-center',
    component: CrisisCenterComponent,
    children: [
      {
        path: '',
        component: CrisisListComponent,
        children: [
          {
            path: ':id',
            component: CrisisDetailComponent
          },
          {
            path: '',
            component: CrisisCenterHomeComponent
          }
        ]
      }
    ]   } ];

Так что для вашего случая у вас будет: 

{ path: 'body', component:      BodyComponent, children: [ { path: '', redirectTo: 'user', pathMatch: 'full' }, { path: 'user', component: UserComponent } ] }
...