【问题标题】:how to check active child router from parent router or parent router against?如何从父路由器或父路由器检查活动子路由器?
【发布时间】:2017-10-13 04:53:56
【问题描述】:

如何检查子路由器是否活动,在角度 4 中显示状态真或假,
现在我正在使用: /* @角/cli:1.4.4 节点:8.6.0 打字稿:2.3.4 @角/路由器: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;
    }
}

【问题讨论】:

    标签: angular if-statement conditional-statements router angular-routing


    【解决方案1】:

    导入你的父组件.ts

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

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

    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
        }
    }
    

    注意:此代码适用于我的应用程序(谢谢)

    【讨论】:

    • 这项工作仅第一次加载父组件,但我需要在此页面中更改任何路由器
    • 如果您想跟踪更改,请订阅 ngOnInit() 中的 activeRouter.params。
    【解决方案2】:

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

    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))
    

    【讨论】:

      猜你喜欢
      • 2017-03-28
      • 1970-01-01
      • 2016-07-06
      • 2016-11-25
      • 2023-04-06
      • 2017-09-18
      • 2022-07-24
      • 2020-07-26
      • 1970-01-01
      相关资源
      最近更新 更多