как вы меняете боковую панель на основе ссылки маршрутизатора angular 6?

Question

router outlet html 
  <mat-sidenav-content color="accent" style="height: 100%;">
<div fxLayout="row" style="height: 100%;">
  <span fxFlex="fill" fxHide.lt-sm="true"></span>
  <div fxFlex.gt-xs="600px" fxFlex="100%" [fxShow]="location.path() === '' || (location.path().indexOf('/channel/') > -1 && location.path().indexOf('createpoll') == -1 && location.path().indexOf('createarticle') == -1)" style="margin-top:4em">
    <router-outlet name="main600"></router-outlet>    
  </div>
  <div fxFlex.gt-xs="900px" fxFlex="100%" [fxShow]="location.path() !== '' && (location.path().indexOf('/channel/') == -1 || location.path().indexOf('createpoll') > -1 || location.path().indexOf('createarticle') > -1)" style="margin-top:4em">
    <router-outlet></router-outlet>    
  </div>
  <div fxFlex="300px" fxHide.lt-md="true" [fxShow]="location.path() === '' || (location.path().indexOf('/channel/') > -1 && location.path().indexOf('createpoll') == -1 && location.path().indexOf('createarticle') == -1)" style="margin-top:4em">
    <router-outlet name="side-bar"></router-outlet>    
  </div>

  <span fxFlex="fill" fxHide.lt-sm="true"></span>  
</div>

app-routing module follows here:


{path: 'login', component: LoginComponent},
{path: 'home', redirectTo: "", pathMatch: "full"},
{
path: '', canActivate: [AuthGuard], component: LayoutComponent,
children: [
  {path: '', component: HomeComponent, pathMatch: "full", outlet:"main600"},
  {path: '', component: HomesidebarComponent, outlet:"side-bar", pathMatch: "full"},
   {
    path: 'community/:communityName', canActivateChild: [CommunityGuard],
    children: [
      {path: '', component: CommunityComponent},
      {path: 'about', component: CommunityaboutComponent},        
      {path: 'channels', component: ChannelsComponent, data: {roles:['member','owner','moderator']}},        
         {path: 'channel/:channelId',
    children: [
      {path: '', component: ChannelComponent, outlet:"main600", pathMatch: "full", data: {roles:['member','owner','moderator']}},
      {path: '', component: ChannelsidebarComponent, outlet:"side-bar", pathMatch: "full", data: {roles:['member','owner','moderator']}},        
      {path: 'createarticle', component: CreatearticleComponent, data: {roles:['member','owner','moderator']}},
      {path: 'createpoll', component: CreatepollComponent, data: {roles:['member','owner','moderator']}},
      {path: 'post/:postId', 
        children:[
          {path:'', component: PostComponent, outlet:"main600", pathMatch: "full", data: {roles:['member','owner','moderator']}},
          {path:'', component: ChannelsidebarComponent, outlet:"side-bar", pathMatch: "full", data: {roles:['member','owner','moderator']}},
        ]
      }
    ]
  }

У меня есть два выхода маршрутизатора, я пытаюсь реализовать функции маршрутизации в моем Angular приложении , успех. Маршрутизация работает на главном контейнере моего приложения, и проблема, с которой я сталкиваюсь, заключается в том, что при перенаправлении на другой компонент, например, в соответствии с тем, что боковая панель конкретного маршрутизатора должна загружаться, но только при refre sh она показывает боковую панель, (ChannelsidebarComponent) боковая панель не загружается и не отображается старая (PostComponent) боковая панель. Я пытаюсь понять, как работают именованные выходы в Angular 6. Как это сделать в соответствии с изменением маршрутизатора, боковая панель должна загружаться

Может кто-нибудь, пожалуйста, помогите мне с этим выдавать? Я пытался решить эту проблему, но мне не повезло.

спасибо