时间戳

首页 > 解决方案 > 如何在 Angular 2 中获取子组件中父组件的名称？

angular - 如何在 Angular 2 中获取子组件中父组件的名称？

问题描述

假设我有三个组件：C1、C2 和 C3。

我想让 C2 成为C1 和 C3的孩子。并且根据哪个组件是 C2 的父级的事实想要显示 HTML 文本 - “ C1 是我的父级”或“ c3 是我的父级”。这是我的问题的表面形式。我想在 c2 中访问父组件的名称，然后将相应地更改其 innerHTML。

如何在angular2中访问父组件的名称？

标签： angularparent-childmean-stack

解决方案

您可以简单地将描述您的父组件的内容传递给子组件@Input。

子组件示例：

@Component({
  selector: 'child',
  template: `
    <div>{{ parentName }} is my parent</div>
  `,
})
export class ChildComponent {
  @Input() parentName: string;
}

第一家长：

@Component({
  selector: 'first-parent',
  template: `
    <child-component parentName="'first-parent-component'" />
  `,
})
export class FirstParentComponent {
}

第二位家长：

@Component({
  selector: 'second-parent',
  template: `
    <child-component parentName="'second-parent-component'" />
  `,
})
export class SecondParentComponent {
}

推荐阅读