角材料sidenav +路线=>默认选择

Question

我在我的应用程序中使用材料侧边栏并与路由器导航。基本上看起来像

<mat-sidenav-container [hasBackdrop]="true" autosize>
    <mat-sidenav
        (opened)="openCollapsed()"
        [opened]="!isMobile"
        [fixedInViewport]="!isMobile"
        [fixedTopGap]="64"
        [fixedBottomGap]="40"
        [mode]="isMobile ? 'over' : 'side'"
    >
    <mat-nav-list>
      <a
        *ngFor="let route of routes"
        mat-list-item
        (click)="selectNavItem(route.path)"
      >
        {{ route.label }}</a
      >
    </mat-nav-list>
  </mat-sidenav>
    <mat-sidenav-content>
        <div class="app-result">
            <router-outlet></router-outlet>
        </div>
    </mat-sidenav-content>
</mat-sidenav-container>

基本上是路由和一切工作。但是两个很奇怪

1. 路由显示组件 - 但是我需要单击组件内部以激活它。但是，由于我已经选择了一条路线，如何防止此外单击？ i

2. 单击组件 - 侧边栏正在关闭，尽管应保持打开 - 至少在桌面上。在移动设备上，它应该关闭，但我看不出可以在哪里影响这种行为。

   fixedInViewport

   是相应设置的 - 因此没有真正的想法。

我在

stackblitz上的项目

Answer 1

当导航触发Navbar关闭时，这将直接显示组件。

selectNavItem(route: string): void {
    this.router.navigate([route]).then(() => {
        this.sidenav().close();
    });
}

调整大小时，切换仅用于桌面倒塌：

ngOnInit() {
    this.observer.observe(['(max-width: 800px)']).subscribe((screenSize) => {
        this.isMobile = screenSize.matches;
        if(!screenSize.matches) {
                this.isCollapsed = true;
        }
    });
} 

打开的是在桌面上触发的，该桌面打开了Sidenav，以阻止它，我们可以使用

&&

并仅在Mobile上触发该功能。

<mat-sidenav-container [hasBackdrop]="true" autosize>
    <mat-sidenav
        (opened)="isMobile && openCollapsed()"