大家好,
我想使用*ngIf
来移除页面上的某个部分,如果一个特定的router-outlet
有一个组件。
我已经尝试通过ActivatedRoute
和Router
进行搜索,但似乎无法解决它。如何检查是否使用了特定的router-outlet
?
大家好,
我想使用*ngIf
来移除页面上的某个部分,如果一个特定的router-outlet
有一个组件。
我已经尝试通过ActivatedRoute
和Router
进行搜索,但似乎无法解决它。如何检查是否使用了特定的router-outlet
?
可以这样解决:
<div [hidden]="!myOutlet.isActivated">
<router-outlet name="my-outlet" #myOutlet="outlet"></router-outlet>
</div>
组件类不需要进行任何更改。
我弄清楚了。你需要使用路由器插座的事件。但是,你不能使用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>
router-outlet
的用例是什么? - Sonu Kapoor要检查插座是否正在使用,请尝试这个:
<router-outlet #outlet="outlet"></router-outlet>
<div *ngIf="!outlet.isActivated">Outlet is EMPTY!</div>
<div *ngIf="outlet.isActivated">Outlet is in use!</div>
可以从 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));
}
}
优点是您可以从应用程序的每个组件中检索每个插座的状态。