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

我有一个组件，作为其他两个组件的子组件使用。这两个父组件是不同的类，我希望能够根据我所在的类来做一些事情

---

有没有一种方法可以用

@Host

或

@Inject

和

instanceof

这样的东西来说明这一点？如果没有，还有别的办法吗？

我的建议是不要这样做。如果在子组件上需要不同的行为：

• 使用父级必须填写的@Input属性，然后子级知道如何处理该值

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

让孩子知道你所建议的父母的方式是可能的，但同样，不是我所建议的

例如，假设您有一个日历按钮，您在300个不同的家长中使用它，但150个家长希望它是蓝色的，150个家长希望它是红色的

如果您选择打开家长，则必须基于家长向您的孩子添加300个条件

---

相反，如果您传递一个输入属性或一个服务属性是共享的，那么您不必添加通用代码来处理这组值，红-蓝是2。

我的建议是不要这样做。如果在子组件上需要不同的行为：

• 使用父级必须填写的@Input属性，然后子级知道如何处理该值

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

让孩子知道你所建议的父母的方式是可能的，但同样，不是我所建议的

例如，假设您有一个日历按钮，您在300个不同的家长中使用它，但150个家长希望它是蓝色的，150个家长希望它是红色的

如果您选择打开家长，则必须基于家长向您的孩子添加300个条件

---

相反，如果您传递了一个输入属性或一个服务属性是共享的，那么您不必添加通用代码来处理这组值，红色-蓝色是2。

我们可以在这里使用

redux

思考。设置保存在

服务

中的

状态

，即

存储

在

redux中

。每次使用两个父组件中的一个时，更新

状态

。子组件将通过读取

状态

知道正在使用哪个父组件，我们可以在这里使用

redux

思考。设置保存在

服务

中的

状态

，即

存储

在

redux中

。每次使用两个父组件中的一个时，更新

状态

。子组件将通过读取

状态
来知道正在使用哪个父组件。假设父组件没有任何层次关系或是同级组件，使用类型安全性执行此操作的最简单方法是为父类型创建
枚举
：

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

然后，您可以在
子组件中创建
@Input
属性，如下所示：

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;
}

从'@angular/core'导入{Component，Input}；
从“./Parent type.enum”导入{Parent}；
@组成部分({
选择器：'子'，
模板：`我的父母是{{Parent}}`，
样式：[`h1{font-family:Lato；}`]
})
导出类子组件{
@输入（）父项：父项；
}

在你的父母身上这样使用：

对于父组件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;
}

从'@angular/core'导入{Component，Input}；
从“./Parent type.enum”导入{Parent}；
@组成部分({
选择器：'parent-a'，
模板：``，
样式：[`h1{font-family:Lato；}`]
})
导出类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;
}

从'@angular/core'导入{Component，Input}；
从“./Parent type.enum”导入{Parent}；
@组成部分({
选择器：'parent-b'，
模板：``，
样式：[`h1{font-family:Lato；}`]
})
导出类ParentB组件{
parent=parent.ParentB；
}

这里有一个供参考的示例。
假设父组件没有任何层次关系或是同级组件，最简单的方法就是为父类型创建一个枚举：

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

然后，您可以在
子组件中创建
@Input
属性，如下所示：

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;
}

从'@angular/core'导入{Component，Input}；
从“./Parent type.enum”导入{Parent}；
@组成部分({
选择器：'子'，
模板：`我的父母是{{Parent}}`，
样式：[`h1{font-family:Lato；}`]
})
导出类子组件{
@输入（）父项：父项；
}

在你的父母身上这样使用：

对于父组件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;
}

从'@angular/core'导入{Component，Input}；
从“./Parent type.enum”导入{Parent}；
@组成部分({
选择器：'parent-a'，
模板：``，
样式：[`h1{font-family:Lato；}`]
})
导出类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;
}

从'@angular/core'导入{Component，Input}；
从“./Parent type.enum”导入{Parent}；
@组成部分({
选择器：'parent-b'，
模板：``，
样式：[`h1{font-family:Lato；}`]
})
导出类ParentB组件{
parent=parent.ParentB；
}

这是给你的裁判的一封信