代码之家 › 专栏 › 技术社区 › Mateut Alin

角度:如何订阅父组件中的子路径?

angular

Mateut Alin · 技术社区 · 5 年前

我的模块中有以下路径:

const userManagementRoutes: Routes = [
  {
    path: 'userManagement',
    component: UserManagementComponent,
    children: [
      {
        path: 'users',
        component: UsersComponent
      },
      {
        path: 'user-groups',
        component: UserGroupsComponent
      },
      ... (many other routes)
  }
];

我想订阅父组件中的url,以便父组件知道何时呈现子组件。例如:当url从

http://localhost:4200/userManagement/users

到

 http://localhost:4200/userManagement/user-groups

家长应该知道。

我试图做到以下几点,但这两种方法都不起作用:

export class UserManagementComponent implements OnInit {

  constructor(private route: ActivatedRoute) {  }

  ngOnInit() {
    this.route.firstChild.params.subscribe(params => {
      console.log(params);
    });

    this.route.params.subscribe(params => {
      console.log(params);
    });

    this.route.url.subscribe(params => {
      console.log(params);
    });
  }
}

2 回复 | 直到 5 年前

ChrisEenberg 5 年前

您可以订阅路由器事件,如下所示:

import { Router } from '@angular/router';
this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        const currentUrl = event.url;
      }
    });

这将在每次发生路由更改时通知您。尽管请记住这是所有路由器事件,而不仅仅是子路由更改。

希望这有帮助。

问候克里斯

Amit Chigadani 5 年前

根据本期 here ,没有直接的解决方案。但是一个变通方法,它会留意每一个路线的改变,然后你可以检查这是否是第一个孩子。

在这里复制相同的代码

this._router.events
      .pipe(
        filter(event => event instanceof NavigationEnd),
        switchMap(
          () =>
            (this._route.firstChild && this._route.firstChild.params) ||
            observableOf({}),
        ),
      )
      .subscribe(params => console.log(params));

推荐文章

Kiara · 根据条件角度显示多个模板

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Piotr Deja · 如何在subscribe方法中为参数赋值,然后从组件内部的任何位置检索该值?

1 年前

Ben5 · 服务器端总是接触FormControl

1 年前

allforthenoob · 我该怎么分类?

1 年前

Hamid Elouardaoui · 角度生成:发生未处理的异常:服务不再运行

1 年前

Hugh Jones · 如何创建适用于多个来源的自签名开发证书

1 年前

jthorn · 角度对象未在HTML中显示

1 年前

clem · 如何在Angular应用程序中突出显示页面的一部分?

1 年前

Kael · 在html表格中显示关系api数据-角度

2 年前