如何获取angular2中Child组件中Parent组件的名称？

Question

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

我想让 C2 成为 C1 和 C3 的 child。并根据哪个组件是 C2 的 parent 想要显示 HTML 文本 - “C1 is my parent” 或 “c3 是我的 parent”。这是我的问题的表面形式。我想访问c2中parent组件的名称，然后相应地更改其内部HTML。

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

Answer 1

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

child 组件示例：

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

第一个parent:

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

第二个parent:

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

如何获取angular2中Child组件中Parent组件的名称？

How to get the name of the Parent component in Child component in angular 2?

parent-child

mean-stack

angular