Компонент не отображается в дочернем маршруте в Angular 9 - PullRequest
Новая
       23

Компонент не отображается в дочернем маршруте в Angular 9

0 голосов
/ 26 апреля 2020

Вот мои app.component.html: 

<app-sidenav></app-sidenav>

и sidenav.component.html: 

<mat-sidenav-container class="some-class">
    <mat-sidenav opened mode="side">
        ...
    </mat-sidenav>
    <mat-sidenav-content>
        <router-outlet></router-outlet>
    </mat-sidenav-content>
</mat-sidenav-container>

app-routing.module.ts: 

const routes: Routes = [

  { path: '', redirectTo: '/home', pathMatch: 'full', },
  { path: 'home', component: HomeComponent, },
  { path: 'admin', redirectTo: '/admin/users', pathMatch: 'full', },
  { path: 'admin', children: [{
      path: 'permissions', component: PermissionsComponent, }, {
      path: 'users', component: UsersComponent, },]},
];

и один маршрут Компоненты UsersComponent и имеют следующий шаблон: 

<mat-toolbar>
  <h1 class="headline">Administration</h1>
</mat-toolbar>

<mat-sidenav-container>
  <mat-sidenav opened mode="side">
    ...
  </mat-sidenav>
  <mat-sidenav-content>
    <p>users works!</p>
  </mat-sidenav-content>
</mat-sidenav-container>

, и это работает, как и ожидалось, до этого момента. Но когда я создаю новый компонент (скажем, inner-sidenav со следующим шаблоном (из UsersComponent): 

<mat-sidenav opened mode="side">
  ...
</mat-sidenav>

и обновляю шаблон UsersComponent до: 

<mat-toolbar>
  <h1 class="headline">Administration</h1>
</mat-toolbar>

<mat-sidenav-container>
    <app-inner-sidenav></app-inner-sidenav>
  <mat-sidenav-content>
    <p>users works!</p>
  </mat-sidenav-content>
</mat-sidenav-container>

внутреннее mat-sidenav (которое должно отображаться вместо app-inner-sidebar) вообще не отображается. Что мне не хватает?

Обновление:

Чтобы повторить проблему, пожалуйста, посетите здесь .

Ответы [ 2 ]

0 голосов
/ 26 апреля 2020

Если у вас есть <mat-sidenav-content> внутри <mat-sidenav-container>, вы не можете добавить пользовательский html внутри <mat-sidenav-container>. Вместо этого вы должны добавить свой <app-inner-sidenav> внутри <mat-sidenav-content>. 

<mat-sidenav-container>
  <mat-sidenav opened mode="side">
    <a [routerLink]="['/admin/users']">Users hehe</a>
  </mat-sidenav>
  <mat-sidenav-content>
    <app-inner-sidenav></app-inner-sidenav>
    <p>users works!</p>
  </mat-sidenav-content>
</mat-sidenav-container>

или вы можете удалить <mat-sidenav-content> вот так 

<mat-sidenav-container>
    <mat-sidenav opened mode="side">
        <a [routerLink]="['/admin/users']">Users hehe</a>
    </mat-sidenav>
    <app-inner-sidenav></app-inner-sidenav>
    <p>users works!</p>
</mat-sidenav-container>
0 голосов
/ 26 апреля 2020

@ Хасан, причина в том, что правила вложенности Материала Сиденав. Вы не можете иметь «чужой» элемент в качестве прямого дочернего элемента <mat-sidenav-container> (во многом как <table> может иметь только <thead>, <tbody>, <tr> в качестве прямых дочерних элементов).

Вместо Users Разметка компонентов должна быть: 

<mat-sidenav-container>
    <mat-sidenav opened mode="side">
      <app-inner-sidenav></app-inner-sidenav>
    </mat-sidenav>
  <mat-sidenav-content>
    <p>users works!</p>
  </mat-sidenav-content>
</mat-sidenav-container>

И Внутренний Навбар Разметка компонента должна быть: 

<a [routerLink]="['/admin/users']">Users</a>
...