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。请参阅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>

如何禁用Angular材质中的第二个mat-list-item

1 个答案: