Angular 在mat sidenav内容中渲染组件

我使用以下HTML模板创建了一个angular material sidenav：

<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组件中呈现，但应用程序主页仍将显示。当选择菜单项时，我可以隐藏它吗？

由于我对问题的误解，我已经做了最后一次编辑

作为介绍信息：如果您使用的是Angular或Angular材质，则方法相同

编辑：在这里，您可以看到应用于角度材质的相同方法：

原件： 是，您的菜单组件必须使用

eventEmitter

向页面容器发送

boolean

输入，因此当页面加载时，输入的默认状态为

true

，当单击菜单项时，输入状态将变为

false

，并且

应用程序主页

将被隐藏

您的页面容器（或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;
    }

}

//忽略导入
@组成部分({
选择器：“页面容器”，
模板：`
乱数假文
及

//忽略导入
@组成部分({
选择器：“菜单”，
模板：`

菜单项1
菜单项2
`
})
导出类菜单组件{
showHideBoolean:boolean；//只需删除默认值
//要发送的输出
@Output（）show:EventEmitter=neweventemitter（）；
@Output（）hide:EventEmitter=neweventemitter（）；
showHideElement（）{
log（'您已单击菜单项'）
this.showhidebolean=！this.showhidebolean；
如果（这是一个好汉）{
this.show.emit（true）；
console.log（'要发送的值：'，this.showHideBoolean）
}否则{
this.hide.emit（false）；
console.log（'要发送的值：'，this.showHideBoolean）
}
}
}

您的应用程序主页组件将与此类似-在此处使用

@组件({
选择器：“应用程序主页”，
模板：`
我是第一要素
我是第二个元素！
我也是一个元素`
})
导出类AppHomeComponent{
//在此处使用@Import
@Input（）toggle:Boolean；//只需删除默认值
}    
Hello Emanuele，谢谢你的回答。我使用的侧导航组件是一个单角度材质基本侧导航组件（请参阅）。我只想显示和隐藏应用程序主页组件。我认为可以按照您的建议进行，但无法确定事件发射器应放在何处。Hi@Elias可能我误解了您的问题。当您单击
菜单组件中的某个元素时，您想隐藏哪个组件？
？我已更改答案以隐藏该组件
apphome
component你好，伊曼纽尔，也许我的问题不清楚，我把它改了一点：）我想隐藏的组件是基于您的回答的app home组件。当单击菜单选项时，我会在navbar.component.ts中发出一个事件，但我无法读取父组件中的值。显然，您可以使用RxJS中的其他技术，如
行为主体
或
可观察对象
但
@Output
和
EventEmitter
是唯一一款不涉及使用外部库的产品。它无法100%正常工作。不知何故，我感到困惑。有些东西不合适。单击同一个按钮时，showHideBoolean变量会发生变化
// 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) 
      }
    }
}

@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

}