从嵌套组件中的基础组件获取 ViewChild

Question

我有三个非常相似的自定义下拉组件：

1. 基础下拉菜单
2. 搜索下拉菜单
3. 带有高级搜索功能的下拉菜单

他们有许多共同的行为，但也有一些不同。我决定将它们分成三个不同的组件，因为当它是一个具有 20 个 @Input() 属性和许多 if else 用于选择一种或其他行为的大组件时，这很糟糕。他们也有相同的下拉选项。所以唯一的区别是 input(header, idk 如何正确调用它) 和 button-press 处理程序。 这里是简化的example

所以我在base-dropdown 组件中有setDropdownPosition() 方法。它计算应该在哪里打开下拉菜单 - 在输入上方或下方。在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. 从子节点获取父节点

注射器

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) {}