компонент рендеринга в mat-sidenav-content

Question

Я создал угловой материал sidenav со следующим шаблоном HTML:

<mat-sidenav-container>
<mat-sidenav>
 <!--menu component added here-->
</mat-sidenav>

<mat-sidenav-content>
  <app-home></app-home>
  <router-outlet></router-outlet>
</mat-sidenav-content>
</mat-sidenav-container>

Когда шаблон загружается впервые, компонент app-home будет отображаться. При выборе пункта меню соответствующий компонент будет отображаться в mat-sidenav-component, но app-home все равно будет отображаться. Могу ли я скрыть это при выборе пункта меню?

Answer 1

Из-за моего неправильного понимания вопроса я произвел последнее редактирование.

В качестве вводной информации: метод тот же, если вы используете Angualr или Angular Material.

РЕДАКТИРОВАТЬ: Здесь вы можете увидеть тот же метод, примененный к угловому материалу: Пример стека блиц

ОРИГИНАЛ: Да, ваш компонент меню должен отправить boolean вход в контейнер вашей страницы с помощью eventEmitter, поэтому, когда страница загружена, состояние ввода по умолчанию равно true, и при нажатии на элемент меню состояние ввода изменится на false и app-home будет скрыт.

Ваш контейнер страницы (или главный компонент sidenav) будет таким

// Imports omitted
@Component({
  selector: 'page-container',
  template: `
  <mat-sidenav-container>
    <mat-sidenav opened mode="side">Lorem ipsum</mat-sidenav>
      <mat-sidenav-content>
         <menu-component (show)="show($event)" (hide)="hide($event)"></menu-component>
      </mat-sidenav-content>
      <mat-sidenav-content>
         <app-home [toggle]="visible"></app-home>
      </mat-sidenav-content>
  </mat-sidenav-container>`
  })

export class PageContainerPage {

    visible: boolean;

    show(event: boolean) {
      this.visible = event;
    }

    hide(event: boolean) {
      this.visible = event;
    }

}

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

// Imports omitted
@Component({
  selector: 'menu',
  template: `
      <ul>
        <li (click)="showElement()">menu item 1</li>
        <li (click)="hideElement()">menu item 2</li>
      </ul>`
})

export class MenuComponent {
    showHideBoolean: boolean; // Just delete default value

    // Output to send
    @Output() show: EventEmitter<Boolean> = new EventEmitter<Boolean>();
    @Output() hide: EventEmitter<Boolean> = new EventEmitter<Boolean>();

    showHideElement(){
      console.log('you have click on a menu item')
      this.showHideBoolean = !this.showHideBoolean;

      if (this.showHideBoolean) {
         this.show.emit(true);
         console.log('value to send: ', this.showHideBoolean) 
      } else {
         this.hide.emit(false);
         console.log('value to send: ', this.showHideBoolean) 
      }
    }
}

Ваш app-home компонент будет таким - используется здесь input

@Component({
  selector: 'app-home',
  template: `
    <div [hidden]="toggle">I'm the first element</div>
    <div [ngClass]="{'color-red' : toggle}">I'm the second element!</div>
    <div *ngIf="toggle">I'm an element too!</div>`
})

export class AppHomeComponent {

    // Use @Import here
    @Input() toggle: Boolean; // Just remove the default value

}