Angular Material 5中mat-sidenav-container内路由与点击事件失效求助

Hey there, let's tackle this issue you're facing with Angular 5 and Angular Material. Since your mat-toolbar's routerLinks and click handlers work fine but the ones inside mat-sidenav-content don't, here are the most common fixes to try out:

1. Check if RouterModule is imported in your component's module #

If the components inside mat-sidenav-content belong to a feature module that hasn't imported RouterModule (or RouterModule.forChild(...)), the routerLink directive won't be recognized—hence no routing behavior. Your toolbar's module (likely AppModule) already has RouterModule imported, which is why its links work.

Fix this by adding RouterModule to your feature module's imports:

import { RouterModule } from '@angular/router';

@NgModule({
  imports: [
    // ... other imports
    RouterModule
  ]
})
export class YourFeatureModule { }

2. Look for accidental pointer-events: none CSS #

It's easy to accidentally apply pointer-events: none to mat-sidenav-content or its child elements, which completely blocks all mouse interactions (clicks, hover, routing).

Check your CSS/SCSS files for code like this:

.mat-sidenav-content {
  pointer-events: none;
}

If you find it, remove it or set it to pointer-events: auto.

3. Validate your component's change detection strategy #

If your component uses ChangeDetectionStrategy.OnPush but isn't triggering change detection correctly, it can break event bindings or routing (even though this usually shows up as view updates failing).

Temporarily switch back to the default strategy to test:

import { Component, ChangeDetectionStrategy } from '@angular/core';

@Component({
  // ... other config
  changeDetection: ChangeDetectionStrategy.Default // Replace OnPush temporarily
})
export class YourComponent { }

If this fixes the issue, you'll need to adjust your OnPush implementation—make sure input properties are updated properly, or manually call changeDetectorRef.markForCheck() when needed.

4. Fix template context issues #

If your mat-sidenav-content content is wrapped in an ng-template without proper context binding, it can lose access to your component's methods and directives.

For example, this broken setup:

<mat-sidenav-content>
  <ng-template>
    <button (click)="yourMethod()">Click Me</button>
  </ng-template>
</mat-sidenav-content>

Can be fixed by using *ngTemplateOutlet with context:

<mat-sidenav-content>
  <ng-container *ngTemplateOutlet="yourTemplate; context: { $implicit: this }"></ng-container>
  <ng-template #yourTemplate let-component>
    <button (click)="component.yourMethod()">Click Me</button>
  </ng-template>
</mat-sidenav-content>

Or better yet, avoid unnecessary ng-template wrappers and render content directly.

5. Ensure your mat-sidenav-container structure is standard #

Incorrect nesting can cause event propagation issues. Stick to the official Angular Material structure:

<mat-sidenav-container>
  <mat-sidenav #sidemenu mode="side">
    <!-- Sidebar content -->
  </mat-sidenav>
  <mat-sidenav-content>
    <!-- Main content, including your router-outlet -->
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

Make sure mat-sidenav-content is a direct child of mat-sidenav-container to avoid unexpected style or event conflicts.

内容的提问来源于stack exchange，提问作者fariba.j