如何检查来自父路由器或父路由器的活动子路由器？

Question

如何检查子路由器是否处于活动状态，显示 angular 中的状态 true 或 false 4，
现在我正在使用： /* @angular/cli：1.4.4 节点：8.6.0 打字稿：2.3.4 @angular/router：4.4.4 */

我的父路线是：

const routes:Routes=[
    {
        path: '', component: SummaryOfFindingsComponent,
        children:[
            {
                path:'data-time-frame', component: DataTimeFrameComponent
            },
            {
                path:'email-address', component: EmailAddressesComponent
            },
            {
                path:'repair-orders', component: RepairOrdersComponent
            },
            {
                path:'total-records', component:TotalRecordsComponent
            },
            {
                path:'unique-households', component: UniqueHouseholdsComponent
            },
            {
                path:'unique-vins', component: UniqueVinsComponent
            }
        ]
    }
]

父组件是：

export class SummaryOfFindingsComponent implements OnInit {
    isUserSelected;
    constructor() { this.isUserSelected=false; }
    ngOnInit() { }
    isUserItemSelect(){
        this.isUserSelected=true;
    }
}

Answer 1

导入你的parentcomponent.ts

import { ActivatedRoute } from '@angular/router';

和生命周期挂钩 ngOnInit() 并创建 ActivatedRoute 的 Refarence

constructor(private activeRouter:ActivatedRoute) {}

并在此处的 ngOnInit 函数中编写一些代码..

ngOnInit() {
    var _activeChild = this.activeRouter.children.length;
    if (_activeChild!=0) {
        //your active children 1 or more than children then active 1,otherwise it is 0
    }
}

注意：此代码正在我的应用程序中运行（谢谢）

Answer 2

这是一种在 Observable 中观察 children 的方法...

this.router.events.pipe(
  filter(event => event instanceof ActivationEnd),
  filter(event => (event as ActivationEnd).snapshot.component === SearchFeatureComponent),
  map(event => (event as ActivationEnd).snapshot.children.length),
  distinctUntilChanged()
).subscribe(children => console.warn('route children', children))

Answer 3

我需要一个简单的 Observable 解决方案，它会发出 false 没有子路由处于活动状态。

参加过：


  constructor(
    private router: Router,
    private route: ActivatedRoute
  ) {}

  readonly childActive$ = this.router.events.pipe(
    switchMap(() => of(this.route.children.length > 0))
  );

如何检查来自父路由器或父路由器的活动子路由器？

how to check active child router from parent router or parent router against?

router

if-statement

conditional-statements

angular-routing

angular