Question

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

是否有一种方法可以使用@Host或@Inject和instanceof之类的方式来告知？如果没有，还有其他方法吗？

Answer 1

我的建议是不要这样做。如果您在子组件上需要其他行为，则可以：

使用父项必须填写的@Input属性，然后子项就知道如何处理该值。
或者，使用某种中介，例如状态（即ngrx或akita）或在组件之间进行中介的服务。

让孩子知道父母的建议方式是可能的，但同样，我没有推荐。

例如，假设您有一个日历按钮，并且在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;
}

这是您推荐的Sample StackBlitz。

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

3 个答案: