如何在Angular 2中与子路径共享信息？

发布时间：2020-12-17 18:05:20 所属栏目：安全来源：网络整理

导读：我有一个应用程序,其路由将如下所示： /:partner/login/:partner/tools/:partner/other 目前使用2.0.0-rc.5,我可以非常简单地构建完全如上所述的路由.但是,这种方法的缺点是每个组件都必须自己提取伙伴参数.所以登录路径声明看起来像： { path: ':partner/lo

我有一个应用程序,其路由将如下所示：

/:partner/login
/:partner/tools
/:partner/other

目前使用2.0.0-rc.5,我可以非常简单地构建完全如上所述的路由.但是,这种方法的缺点是每个组件都必须自己提取伙伴参数.所以登录路径声明看起来像：

{
    path: ':partner/login',component: LoginComponent
}

LoginComponent看起来像：

export class LoginComponent implements OnInit {
    partner: string;
    constructor(private _route: ActivatedRoute) { }

    ngOnInit() {
        this._route.params.forEach(p => {
            this.partner = p[`partner`];
        });
    }
}

虽然这可以通过3条路线进行管理,但从概念上讲,我真正想说的是我有一个PartnerComponent,它有子路由登录,工具等.
路由看起来像这样：

{ path: ':partner',component: PartnerComponent
    children: [
        { path: 'login',component: LoginComponent},{ path: 'tools',component: ToolsComponent}
    ]
 }

使用TypeScript的继承,我可以为每个子节点创建一个基本组件,如：

export class BaseComponent implements OnInit {
    partner: string;
    constructor(private _route: ActivatedRoute) { }

    ngOnInit() {
        this._route.parent.params.forEach(p => {
            this.partner = p[`partner`];
        });
    }
}

和子组件看起来像：

export class LoginComponent extends BaseComponent {
    constructor(route: ActivatedRoute) {
        super(route);
    }

    ngOnInit() {
        super.ngOnInit();
    }
}

虽然上述工作,但查找父路线感觉有点脏.我知道如果我改变了层次结构,我只需要在基础中更改它,但仍然如此

是否有更简洁的方法在父路由组件之间共享信息.

如果它是一个更传统的父元素/子元素关系,我们只需使用两者之间的数据绑定来传递该信息.

解决方法

您可以做的是为父路线使用Resolve防护,因此将为任何：伙伴路线加载数据.

一个Resolve看起来像：

import { Injectable }             from '@angular/core';
import { Router,Resolve,ActivatedRouteSnapshot } from '@angular/router';

import { Partner } from './partner.model';
import { Api } from './api.service';

@Injectable()
export class PartnerResolve implements Resolve<Partner> {
  constructor(private api: Api,private router: Router) {}

  resolve(route: ActivatedRouteSnapshot): Observable<Partner> {
    let id = +route.params['partner'];

    return this.api.getPartner(id);
  }
}

然后,您的路线需要包含PartnerResolve,以便在请求数据并且可用之前不会加载：

{
  path: ':partner',component: PartnerComponent,resolve: {
    partner: PartnerResolve
  },children: [
    { path: 'login',component: ToolsComponent},]
}

而你的PartnerComponent只会得到它：

ngOnInit() {
  this.route.data.forEach((data: { partner: Partner }) => {
    this.partner = data.partner;
  });
}

您的子组件将使用：

ngOnInit() {
  this.route.parent.data.forEach((data: { partner: Partner }) => {
    this.partner = data.partner;
  });
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!