Question

所有

如果特定*ngIf有组件，我想使用router-outlet删除网页的某个部分。

我尝试搜索ActivatedRoute和Router，但我似乎无法弄明白。如何检查特定router-outlet是否正在使用？

Answer 1

可以这样解决：

<div [hidden]="!myOutlet.isActivated">
  <router-outlet name="my-outlet" #myOutlet="outlet"></router-outlet>
</div>

无需更改组件类。

Answer 2

我想出来了。您需要将事件用于路由器插座。但是，您无法使用ngIf，因为除非插座位于dom中，否则不会触发事件。

<强> TS

showOutlet: false;

onActivate(event : any) {
  this.showOutlet = true;
}

onDeactivate(event : any) {
  this.showOutlet = false;
}

<强> HTML

<div [hidden]="!showOutlet">
  <router-outlet name="my-outlet"
      (activate)="onActivate($event)"
      (deactivate)="onDeactivate($event)"></router-outlet>
</div>

Answer 3

可以从Angular Router获取此信息。

从@angular/core: 7.2.0版开始。

html：

<router-outlet name="myOutlet"></router-outlet>

任何组件文件的

ts ：

export class MyComponent {

    constructor(
        router: Router
    ) {}

    ngOnInit(): void {
        const myOutletIsActive: Observable<boolean> = this.router.events.pipe(
            filter((event: RouterEvent) => event instanceof NavigationEnd),
            map(() => this.router.getCurrentNavigation()
                .extractedUrl.root.children.primary.children.myOutlet !== undefined)
        );
        myOutletIsActive.subscribe(isActive => console.log('isActive', isActive));
    }   
}

优点是您可以从应用程序的每个组件中检索每个插座的状态。

检查路由器插座是否正在使用中

3 个答案: