Как определить родительский класс дочернего компонента?

Question

У меня есть компонент, который я использую как дочерний для двух других компонентов.Эти два родительских компонента - это разные классы, и я хочу иметь возможность делать что-то на основе того, в котором я нахожусь.

Есть ли способ сказать это, используя что-то вроде @Host или @Inject иinstanceof?Если нет, есть ли другой способ?

Answer 1

Мы можем использовать redux мышление здесь.Установите state, сохраненный в service, или store в redux.Каждый раз, когда используется один из двух родительских компонентов, обновляйте state.Дочерний компонент узнает, какой родительский компонент используется, прочитав state.

Answer 2

Предполагая, что родительские компоненты не имеют никаких иерархических отношений или являются братьями и сестрами, самый простой способ сделать это с безопасностью типов - создать 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 для вашей ссылки.

Answer 3

Моя рекомендация - не делать это таким образом.Если вам нужно другое поведение дочернего компонента:

• Используйте свойство @Input, которое родительский компонент должен заполнить, тогда ребенок знает, что делать с этим значением.

• В качестве альтернативы, используйте некоторого посредника, например, состояние (например, ngrx или akita) или службу, которая является посредником между компонентами.

Наличие у детей знаний оРодитель так, как вы предлагаете, возможен, но опять же, не то, что я бы порекомендовал.

Например, представьте, что у вас есть кнопка календаря, и вы используете ее у 300 сотен разных родителей, но 150 хотят, чтобы она была синего цвета, а 150 - красного.

Если вы идете по путичтобы включить родителей, вам необходимо добавить 300 условий для вашего ребенка в зависимости от родителей.

Вместо этого, если вы передаете входное свойство или свойство службы является общим, вам не нужно добавлять, кроме общего кода, для работы с этим набором значений, который в красном синем - 2.