я не могу перейти к розетке внутри другого - PullRequest
Новая
       8

я не могу перейти к розетке внутри другого

2 голосов
/ 06 января 2020

У меня есть 2 маршрутизатора-розетки в моем проекте, и один внутри другого. Первый - это стандартный маршрутизатор-розетка приложения, а второй - внутри одного из «домашних» компонентов, в котором я хочу показать другие компоненты, когда Я нажимаю на панель инструментов, так что это было решение, которое я нашел, чтобы перейти ко второму файлу
html: 

   <mat-toolbar >
      <a routerLink="/sessionag">Session</a>


      <button mat-button style="background-color: #80D0D0" (click)="logout()">logout</button>

    </mat-toolbar>
    <mat-drawer-container >
      <mat-drawer-content style="color: #333333 ;background-color: white">
        <router-outlet name="second"></router-outlet>

      </mat-drawer-content>
    </mat-drawer-container>

Файл AppRoutingModule: 

 const routes: Routes = [

  {path:'sessionag',
    component:SessionAgComponent,outlet:'second'},

];

но это не работает для меня, я не знаю почему.
я сделал что-то не так или не работает, как это

Ответы [ 2 ]

2 голосов
/ 06 января 2020

Если вы не переходите к основному маршрутизатору, вы должны указать angular, на что router-outlet вы хотите направить.

Используя директиву routerLink, вы можете указать желаемую розетку. по маршруту: 

<a 
  [routerLink]="[{ outlets: {second: ['sessionag'] } }]">
  Session
</a>

Демо на Stackblitz

1 голос
/ 21 января 2020

так что я на самом деле искал розетку маршрутизатора внутри другой, и ответ, который я нашел, заключается в добавлении компонента в качестве дочернего элемента компонента, в который я хочу добавить вторую розетку маршрутизатора следующим образом:
в app-routing-module 

    const routes: Routes = [
      {path:'home',
    component:HomepageComponent,
    children:[
      {path:'sessionag',
        component:SessionAgComponent},
      {path:'sessiontek',
        component:SessionTekComponent},
    ]
  },
];

в файле .ts 

this.router.navigate(['/home/sessionag']);

в файле HTML 

 <router-outlet ></router-outlet>
...