Получить ViewChild из базового компонента в nesten компоненте

Question

У меня есть три очень похожих пользовательских выпадающих компонента:

1. базовый выпадающий список
2. выпадающий-с-поиска
3. выпадающая-с-поиск продвинутого

У них много общего поведения, но также у них и другое. Я решил разделить их на три разных компонента, потому что когда это был один большой компонент с 20 @Input() свойствами и множеством if else для выбора того или иного поведения, это было ужасно. Также у них есть идентичные выпадающие опции. Таким образом, единственное отличие - это ввод (header, idk, как это правильно назвать) и обработчики нажатия кнопок. Вот упрощенный пример

Итак, у меня есть setDropdownPosition() метод в base-dropdown компоненте. Он вычисляет, где раскрывающийся список должен быть открыт - выше или ниже ввода. В dropdown-witch-search компоненте у меня есть доступ к родительскому методу, например toggleOptions() или setDropdownPosition(). Но у меня нет доступа к родителю @ViewChild('dropdownContainer') dropdownContainer: ElementRef;, чтобы разместить его в расширенном компоненте. И setDropdownPosition() выдает ошибку. Раньше у меня был собственный шаблон в каждом компоненте (и он работает), но в каждом шаблоне было много повторяющихся вещей, как я упоминал ранее - опции и т. Д. Как лучше всего решить эту проблему? Спасибо

Answer 1

Я не уверен, что вы хотите, поэтому я объясню два способа:

1. Получить дочернюю переменную из родительского компонента

   @ViewChild(ChildComponent) child: ChildComponent; // One child
   @ViewChildren(ChildComponent) children: QueryList<ChildComponent>; // Several children
   
   ngOnInit() {
     this.child.someVariable = 'foo';
   }
   

2. Получить родителя от ребенка

Injector

constructor(private injector: Injector){
  let parentComponent = this.injector.get(ParentComponent);
}

Сквозной ввод

родитель

parent = this;

ребенок

@Input() parent: ParentComponent;
...
<app-child [parent]="parent"></app-child>

Прямой впрыск

constructor(@Inject(forwardRef(() => ParentComponent)) private parent:ParentComponent) {}