3 Вопрос: Как скрыть / показать компонент в соответствии с текущим компонентом?

вопрос создан в Wed, May 8, 2019 12:00 AM

Я новичок в изучении углов, и знаю ответ на мою проблему. Я уверен, что это заставит меня многому научиться. в моем компоненте по умолчанию MainComponent загружен в мой <router-outlet>, на этом уровне отображаются как menu, так и footer. Я хочу, чтобы ТОЛЬКО отображался, когда я нахожусь в любом компоненте, который НЕ , в моем случае MainComponent должен отображаться AnotherComponent, но если я вернусь к MainComponent, он не будет , Как я могу это сделать? Я пытался с ngIf, и он не работает для меня (я думаю, что это выходит за рамки этого)

это часть моего кода:

<menu (setAnimal)='setAnimal($event)' ></menu>
<router-outlet (activate)='onActivate($event)'></router-outlet>

р>

@Component({
  selector: 'main',
  template: '<div><a routerLink="/another">anotherComponent</a></div>',
  styles: [`div {
      position: fixed;
      min-width: 100%;
      background-image: url("https://source.unsplash.com/1920x1080?stars") !important;
      background-repeat: no-repeat;
      background-size: 100%;
    background-position: center;
      background-size: cover;
}`]
})

  @Component({
    selector: 'another',
    template: '<div><a routerLink="/">main</a></div>',
    styles: [`div {
      position: fixed;
      min-width: 100%;
      background-image: url("https://source.unsplash.com/1920x1080?landscape") !important;
      background-repeat: no-repeat;
      background-size: 100%;
      background-position: center;
      background-size: cover;
      }`]
  })

это мой живой код:

https://stackblitz.com/edit/angular-qcxnln

спасибо

    
0
3 ответа                              3                         

Если я правильно понимаю, если вы вводите маршрутизатор в свой AppComponent:

constructor(private router: Router){
    router.events.subscribe(e => {
    if(e instanceof NavigationEnd){
      if(e.urlAfterRedirects != '/'){
        this.headerFooterVisible= true;
      }else{
        this.headerFooterVisible= false;
      }

    }
  });

Вы можете подписаться на события маршрута и проверить, находитесь ли вы в корневом пути. Затем с парой ngIf:

<menu (setAnimal)='setAnimal($event)' *ngIf="headerFooterVisible"></menu>
<router-outlet (activate)='onActivate($event)'></router-outlet>
<footer *ngIf="headerFooterVisible"></footer>

StackBlitz

    
2
2019-05-10 05: 49: 04Z
  1. спасибо, это почти работает, но если я вернусь к MainComponent, нижний колонтитул и меню будут загружены .. они никогда не должны загружаться в MainComponent
    2019-05-08 16: 43: 24Z

получите имя компонента в хуке onActivate из router-outlet, используя obj.constructor.name, и сравните его соответствующим образом.

рабочий образец = https://stackblitz.com/edit/angular-r8pnot     

0
2019-05-08 16: 48: 24Z

вы можете поместить меню и нижний колонтитул в другой компонент, сделать это как шаблон страницы. Для страниц, которые вы хотите отобразить как Другой компонент (меню отображения и нижний колонтитул), используйте 'children'

 const appRoutes: Routes = [
    { path: '', component: MainComponent },
    { 
      path: 'another',
      component: AnotherComponent,
      children: [
         path: 'something',
         component: SomeComponent
      ]
  }
];
    
0
2019-05-08 17: 47: 52Z
источник размещен Вот