Как отключить второй элемент mat-list-item в материале Angular

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 guard.Пожалуйста, смотрите демо , надеюсь, это поможет вам.

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>