html - 如何禁用 Angular Material 中的第二个 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

执行此操作的一种快速简便的方法，如果您在第一页上提交的内容是将 bool 类型的变量放入服务中，则可以在某种成功调用时对其进行修改。您可以使用该变量添加禁用的类，还可以检查 auth guard 中的 var。请看demo ，希望这对您有所帮助。

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>