• Angular2学习笔记——在子组件中拿到路由参数


      工作中碰到的问题,特此记录一下。

      Angular2中允许我们以`path:idchildPath`的形式来定义路由,比如:

    export const appRoutes: RouterConfig = [{
        path: 'app/:id', component: AppComponent,
        children: [
            { path: 'share', component: AppShareComponent },
            { path: 'issue', component: AppIssueComponent },
            { path: 'version', component: AppVersionComponent },
            { path: 'usage', component: AppUsageComponent },
            { path: 'notification', component: AppNotificationComponent },
            { path: 'resource', component: AppResourceComponent },
            { path: 'comment', component: AppCommentComponent },
            { path: 'activity', component: AppActivityComponent },
            { path: 'retire', component: AppRetireComponent },
            { path: '', component: AppComponent }
        ]
    }];

      如果是在AppComponent中,很容易使用`ActivatedRoute`拿到当前路由获取参数:

    ngOnInit() {
            this.route.params.subscribe((params) => {
                this.createPies();
                this.onTopListFilterChange(params['id']);
            });
        };

      但如果是在`children`中指定的component要拿到路由参数就没那么容易了,这时候再使用ActivatedRoute根本拿不到参数,我猜应当是在Angular2中一个ActivatedRoute对应一级路由配置,所以我们需要找到父级路由,由父级路由去拿参数。这时我们需要借用Router类的routeState属性的parent方法:

    this.router.routeState.parent(this.activatedRoute).params.subscribe(params => {
       this.getDetailsById(params['id']);
    })

      至此问题解决!

      Angular2给我的感觉是大框架很清晰,细节太琐碎,使用后端开发思维来做前端,过于冗余。目前对Angular2了解并不深入,无法给出详细解释,待我深入了解后,再写一篇关于路由的文章奉献给大家。

  • 相关阅读:
    DataNucleus Access Platform 3.2 M2 发布
    dnsjava 2.1.4 发布,Java 的 DNS 解析包
    deltasql 1.5.5 发布,数据库模型版本控制
    Mezzanine 1.3 和 Cartridge 0.7 发布!
    Spring Framework 3.2 GA版发布,Spring MVC焕然一新
    Filemonitor 2.2.0 发布,文件监控工具
    Rudiments 0.40 发布,C++ 常用工具包
    脚本编程语言 Felix
    JRuby 1.7.2 发布
    OfficeFloor 2.7.0 发布,IoC 框架
  • 原文地址:https://www.cnblogs.com/dojo-lzz/p/5883408.html
Copyright © 2020-2023  润新知