關於Material sidenav 問題

General
1

請問我的side nav 為可不懂關閉呢?
這是我的app.component.html:

<mat-sidenav-container>
  <mat-sidenav #sidenav [(opened)]="isShowing">
	<mat-nav-list>

	  <a mat-list-item [routerLink]="'/accounts'"> Accounts </a>
	  <a mat-list-item [routerLink]="'/create-account'"> Create Account </a>
	  <a mat-list-item [routerLink]="'/contacts'"> Contacts </a>
	  <a mat-list-item [routerLink]="'/create-contact'"> Create Contact </a>
	  <a mat-list-item [routerLink]="'/activities'"> Activities </a>
	  <a mat-list-item [routerLink]="'/create-activity'"> Create Activity </a>
	  <a mat-list-item (click)="toggleSidenav()" href="" mat-list-item>Close</a>

	</mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
	<div style="height: 100vh;">
	  <a mat-list-item (click)="toggleSidenav()" href="" mat-list-item>&#9776;</a>
	  <router-outlet></router-outlet>
	</div>
  </mat-sidenav-content>
</mat-sidenav-container>

這是我的app.component.ts:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  isShowing = true;

  toggleSidenav() {
	this.isShowing = !this.isShowing;
  }

}
3

F12 打開有什麼錯誤訊息嗎? 你可以在 https://stackblitz.com/ 寫一個小的試試看，我剛剛複製到 stackblitz 上面跑，是正常的

5

這是我的screen dump:
http://cstsang.gossipcafe.hk/img.gif

6

終於放上stackblitz了網址如下,但仍然不行:

https://angular-pgfifa.stackblitz.io/

另外我是參考以下web page 的:
https://www.techiediaries.com/angular-material-navigation-toolbar-sidenav/

7

你的問題應該點了畫面會重新讀取吧。請將 <a mat-list-item (click)="toggleSidenav()" 這裡面的 href="" 給拿掉，拿掉後再試試看

8

原來是這麼簡單
另外如何將mat-sidenav-container extends 到全個browser windows 呢?
我試過set mat-sidenav-container style=“height:100%”,但不行,要set 做style=“height:100vh” 才有好一點。

9

竟然是這麼的白痴,連CSS 都不用:

 <mat-sidenav-container fullscreen>
      ....................
 </mat-sidenav-container>