检查是否使用了路由出口（router-outlet）

Question

大家好，

我想使用*ngIf来移除页面上的某个部分，如果一个特定的router-outlet有一个组件。

我已经尝试通过ActivatedRoute和Router进行搜索，但似乎无法解决它。如何检查是否使用了特定的router-outlet？

- Dan Grahn

---

希望这能帮到你：https://dev59.com/r1gR5IYBdhLWcg3wT7xM - Avinash T.

@AvinashT。谢谢。 - Dan Grahn

Answer 1

可以这样解决：

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

组件类不需要进行任何更改。

- martsraits

---

为什么我不能像这样做——html：<router-outlet #myOutlet></router-outlet> ts：@ViewChild('myOutlet') myOutlet: RouterOutlet。当我想要使用myOutlet时，它是一个nativeElement，而不是RouterOutlet。 - fbfatboy

Answer 2

我弄清楚了。你需要使用路由器插座的事件。但是，你不能使用ngIf，因为除非插座存在于dom中，否则不会触发事件。

ts

showOutlet: boolean;

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>

- Dan Grahn

---

出于好奇，您何时会隐藏 router-outlet 的用例是什么？ - Sonu Kapoor

我有一个使用Project Clarity的接口。有时我想使用侧边导航（仪表板），有时我想使用子导航（搜索）。我已经将每个部分设置为不同的路由器出口以分离关注点。 - Dan Grahn

Answer 3

要检查插座是否正在使用，请尝试这个：

<router-outlet #outlet="outlet"></router-outlet>

<div *ngIf="!outlet.isActivated">Outlet is EMPTY!</div>
<div *ngIf="outlet.isActivated">Outlet is in use!</div>

- Mohammadreza Askari

---

最简单的方法是隐藏非“router-outlet”元素。 - Zameer Khan

Answer 4

可以从 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));
    }   
}

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

- pschulzk