如何判斷子組件的父類是什么

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 。