如何禁用Angular材質中的第二個mat-list-item

Question

TLDR應該禁用第二個mat-list-item 。

我想從側面導航中禁用第二個選項，以便用戶應始終單擊第一個，然后在保存第一頁后應導航到第二個。

<!-- navigation.component.html -->

<!-- ... -->

    <mat-nav-list class="mat-list-item-focus">
      <a mat-list-item routerLinkActive="active" routerLink='/cost-share'>Cost Share</a>
      <a mat-list-item routerLinkActive="active" routerLink='/penalty'>Penalty</a>
    </mat-nav-list>

<!-- ... -->

Answer 1

一種快速簡便的方法，如果在首頁提交內容是將boolean類型的變量放入服務中，則可以在某種成功調用中進行修改。 您可以使用該變量添加禁用的類，還可以在auth保護中檢查var。 請觀看演示 ，希望這有助於您前進。

export class AppComponent {
  disabled = true;
  constructor(private exampleService: ExampleService) {
    this.exampleService.pageDisabled.subscribe(status => this.disabled = status);
  }
}

export class AuthGuard implements CanActivate {
  constructor(private router: Router, private exampleService: ExampleService) { }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    const isDisabled = this.exampleService.pageDisabled.getValue();
    return isDisabled ? false : true;
  }
}

export class ExampleService {
  pageDisabled: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true);
  constructor() { }
}

@Component({
  selector: 'page-one',
  template: `
        <div>
            <div>Click on button to enable and navigate to page-two.</div>
            <button (click)="onClick()">Save</button>
        </div>
    `
})
export class PageOneComponent {
  constructor(private router: Router, private exampleService: ExampleService) { }

  onClick() {
    this.exampleService.pageDisabled.next(false);
    this.router.navigate(['/page-two']);
  }
}

<header>
  <nav>
    <a routerLink='page-one'>Page One</a>
    <a [ngClass]="{'disabled': disabled }" routerLink='page-two'>Page Two</a>
  </nav>
</header>
<section>
  <router-outlet></router-outlet>
</section>