Angular 2:从父组件获取RouteParams

2023-11-29

如何从父组件获取 RouteParams?

App.ts:

@Component({
  ...
})

@RouteConfig([
  {path: '/', component: HomeComponent, as: 'Home'},
  {path: '/:username/...', component: ParentComponent, as: 'Parent'}
])

export class HomeComponent {
  ...
}

然后,在ParentComponent,我可以轻松获取我的用户名参数并设置子路由。

Parent.ts:

@Component({
  ...
})

@RouteConfig([
  { path: '/child-1', component: ChildOneComponent, as: 'ChildOne' },
  { path: '/child-2', component: ChildTwoComponent, as: 'ChildTwo' }
])

export class ParentComponent {

  public username: string;

  constructor(
    public params: RouteParams
  ) {
    this.username = params.get('username');
  }

  ...
}

但是,我怎样才能在这些子组件中获得相同的“用户名”参数呢?执行与上面相同的技巧,不会成功。因为这些参数是在 ProfileComponent 或其他地方定义的?

@Component({
  ...
})

export class ChildOneComponent {

  public username: string;

  constructor(
    public params: RouteParams
  ) {
    this.username = params.get('username');
    // returns null
  }

  ...
}

UPDATE:

现在Angular2 Final已经正式发布,正确的做法如下:

export class ChildComponent {

    private sub: any;

    private parentRouteId: number;

    constructor(private route: ActivatedRoute) { }

    ngOnInit() {
        this.sub = this.route.parent.params.subscribe(params => {
            this.parentRouteId = +params["id"];
        });
    }

    ngOnDestroy() {
        this.sub.unsubscribe();
    }
}

原来的:

这是我使用 "@angular/router": "3.0.0-alpha.6" 包的方法:

export class ChildComponent {

    private sub: any;

    private parentRouteId: number;

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

    ngOnInit() {
        this.sub = this.router.routerState.parent(this.route).params.subscribe(params => {
            this.parentRouteId = +params["id"];
        });
    }

    ngOnDestroy() {
        this.sub.unsubscribe();
    }
}

在此示例中,路由具有以下格式:/parent/:id/child/:childid

export const routes: RouterConfig = [
    {
        path: '/parent/:id',
        component: ParentComponent,
        children: [
            { path: '/child/:childid', component: ChildComponent }]
    }
];
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular 2:从父组件获取RouteParams 的相关文章

随机推荐

  • C++:为事件处理程序创建匿名类

    免责声明 该描述包含许多 Qt 细节 他们没有必要回答这个问题 我只是想给你介绍一下背景 我需要对此做出反应focusInEvent of a QTextEdit 不幸的是 这不能作为信号使用 这就是为什么我需要子类化QTextEdit 由
  • 从另一个 ViewController 获取 NSDate 到 titleForHeaderInSection

    我有两个视图 第一个是日历 第二个是带有tableView 我正在尝试显示从第一个视图中选择的日期 设法获取里面选定的日期ViewDidLoad我的 secondaryView 的方法 我如何添加我的NSDate to my NSStrin
  • iTextSharp CreateInk 方法:曲线和角

    我正在使用 iTextSharp 使用 PdfAnnotation CreateInk 在 PDF 文档中绘制标记图形 我正在尝试绘制矩形 并传入五个坐标的数组 我知道 iTextSharp 有一个专门用于绘制矩形的函数 但我尝试仅使用一种
  • 如何在 macOS 上从源代码构建 docker-ce

    有人知道是否有从源代码构建并用其替换 Mac 上的 docker 二进制文件的指南吗 自述文件没有说所以我尝试了一些 make target 但得到了https github com docker for mac issues 3353 E
  • 如何避免数据库死锁?

    一些数据库功能 例如SELECT FOR UPDATE and ON DELETE CASCADE 隐式地容易受到死锁的影响 因为数据库没有指定将使用什么锁定顺序 我发现two 讨论这暗示 SQL 标准并未指定此行为 更不用说具体的实现了
  • MongoDB 更新数组元素

    我有一个像这样的文档结构 id ObjectId 52263922f5ebf05115bf550e Fields Field Lot No Rules Field RMA No Rules 我尝试通过使用以下代码推入将保存对象的规则数组来进
  • android - For 循环中的 R.string.[variable]?

    我正在尝试创建一个R string variable in a for循环可以节省我很多代码行 我尝试过这个 但它不起作用 在 strings xml 中 我有这些
  • Ionic 2 中的页面过渡动画

    我有简单的选项卡模板 Ionic 3 应用程序 其中每当用户根据左或右在视图上滑动时 我都会在选项卡之间切换我会在选项卡和所有工作正常之间切换 接受点击选项卡发生页面转换时没有动画效果或通过滑动屏幕 我正在获取页面推送和弹出的动画 this
  • 如何在 Entity Framework Core 中正确播种具有循环依赖关系的数据?

    首先 我使用 Entity Framework Core 在 NET Core 3 1 中 和代码优先方法 想象一下我有几个这样的实体 public class Employee Key Required public int Id get
  • 如何通过 bash 中的变量传递带空格的命令行参数[重复]

    这个问题在这里已经有答案了 我想要实现的是从文件中读取命令行参数并使用它们调用命令 所以本质上我需要通过 bash 变量传递参数 问题是有些参数中有空格 我怎样才能做到这一点 不工作的代码 来说明问题 file txt 内容 引号只是为了显
  • 使用互操作在 Word 2010 中按样式查找段落

    有人可以给我指出正确的方向 或者告诉我如何使用 c net 中的单词互操作按样式名称查找段落 尝试这样的循环 using WN Microsoft Office Interop Word WN Application WordApp Wor
  • ui 选择 angularjs 设置输入值的最大长度(ui 选择匹配)

    我想要一个额外的属性 就像从 ui select match 传递的 Placeholder 一样 我想设置选择输入的最大长度 我可以通过 select min js 添加属性 maxlength 设置它 但我认为对 lib 进行更改 文件
  • 更新电子邮件验证状态而不重新加载页面

    在我的网络应用程序中注册后 我将用户重定向到一个页面 告诉他验证他的电子邮件 一旦他这样做了 我想自动检测验证状态的变化 然后更改页面 沿着这些思路 auth user subscribe user gt if user user emai
  • WsFederation 身份验证登录循环

    我在使用时遇到登录循环问题WsFederation Authentication在我的 MVC Web 应用程序中 我使用 Visual Studio 创建 Web 应用程序的脚手架并设置WsFederation in the Startu
  • 查找所有子元素的最大值并在 XSLT 中获取其父元素

    使用下面的 XML 我需要找出哪个人在每个站点工作的时间更长 例如 在下面的 XML 中 人员 1 在站点 1 工作了 8 小时 但人员 2 仅工作了 6 小时 因此 结果应包含转换后的 XML 中的人员 1 和站点 1 如果时间相等 则选
  • 签出旧提交并将其设为新提交[重复]

    这个问题在这里已经有答案了 在 Git 上 假设我搞乱了我的提交 并且我想将版本 3 之前的提交作为新版本 如果我做git checkout xxxx 它创建了一个新分支 似乎我只能合并它 我可以将其设为新的 主版本 吗 I want A
  • jQuery 手风琴 - 当打开另一个手风琴窗格时如何折叠其他打开的手风琴窗格

    我有一个手风琴 我希望具有以下功能 当用户单击链接展开时 其他展开的链接 如果有 将折叠 我知道这个功能是内置在手风琴插件中的 但我试图避免添加另一个库 jQuery UI 编辑 这是我现在拥有的代码 这里位于 jsFiddle 上 htt
  • Objective-C 运行时函数的线程安全保证?

    Objective C 运行时函数的线程安全有哪些保证 有吗 我说的是在runtime h中声明的函数 例如class lookupMethod objc setAssociatedObject 其中很多都是线程安全的 调配等等 但也有一些
  • 如何将SqlAlchemy结果序列化为JSON?

    Django 有一些很好的自动序列化功能 可以将 ORM 模型从 DB 返回为 JSON 格式 如何将SQLAlchemy查询结果序列化为JSON格式 I tried jsonpickle encode但它对查询对象本身进行编码 我试过js
  • Angular 2:从父组件获取RouteParams

    如何从父组件获取 RouteParams App ts Component RouteConfig path component HomeComponent as Home path username component ParentCom