如何判断子组件的父类是什么

Question

我有一个用作其他两个组件的子组件。 这两个父组件是不同的类，我希望能够根据自己所处的那个来做某事。

有没有办法使用@Host或@Inject和instanceof来告诉这一点？ 如果没有，还有其他方法吗？

Answer 1

我的建议是不要这样做。 如果在子组件上需要其他行为，请执行以下任一操作：

• 使用父项必须填写的@Input属性，子项便知道如何处理该值。

• 或者，使用某种中介，例如状态（即ngrx或秋田）或在组件之间进行中介的服务。

让孩子以您的提议方式了解父母是可能的，但同样，我不建议这样做。

例如，假设您有一个日历按钮，并且在300万个不同的父母中使用了它，但是150个希望它为蓝色，而150个希望为红色。

如果您选择与父母联系，则必须基于父母为孩子增加300个条件。

相反，如果您传递了输入属性或服务属性被共享，那么您不必添加通用代码即可处理该组值，红色蓝色为2。

Answer 2

我们可以在这里使用redux思维。 设置一个state保存在service ，又名store的redux 。 每次使用两个父组件之一时，请更新state 。 子组件将通过读取state来知道正在使用哪个父组件。

Answer 3

假设父组件没有任何层次关系或同级，那么做到这一点并具有类型安全性的最简单方法是为父类型创建一个enum ：

export enum Parent {
  ParentA = 'Parent A',
  ParentB = 'Parent B'
}

然后，你可以创建一个@Input你的财产ChildComponent ，是这样的：

import { Component, Input } from '@angular/core';

import { Parent } from './parent-type.enum';

@Component({
  selector: 'child',
  template: `<h1>My Parent IS {{ parent }}</h1>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class ChildComponent  {
  @Input() parent: Parent;
}

并在您的父母中这样使用它：

对于父组件1：

import { Component, Input } from '@angular/core';
import { Parent } from './parent-type.enum';

@Component({
  selector: 'parent-a',
  template: `<child [parent]="parent"></child>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class ParentAComponent  {
  parent = Parent.ParentA;
}

对于父组件2

import { Component, Input } from '@angular/core';
import { Parent } from './parent-type.enum';

@Component({
  selector: 'parent-b',
  template: `<child [parent]="parent"></child>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class ParentBComponent  {
  parent = Parent.ParentB;
}

这是供您参考的示例StackBlitz 。