从nesten组件

Question

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

1. base-dropdown
2. 下拉与 - 搜索
3. 下拉与 - 搜索先进

他们有许多共同的行为，但他们也有一些不同。我决定将它们分成三个不同的组件，因为当它是一个具有20个@Input()属性的大组件和许多用于选择一个或其他行为的if else时，它是非常糟糕的。他们也有相同的下拉选项。所以唯一的区别是输入（标题，idk如何正确调用它）和按钮处理程序。 这是简化的example

所以我在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. 从孩子那里获得父母

<强>注射器

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