Question

我有一个可重用的ChildComponent，其中包含带有选项的select。我在多个父组件中使用此组件。我想在子组件中执行不同的功能，具体取决于发生(change)的父组件。因此，如果发生ParentComponent1更改，我想执行parent1_function()。如果更改在ParentComponent2中发生，我要执行parent2_function()。用angular可行，如果不是这样的话，这是干净的解决方案，而不必重写每个父组件中的select

Answer 1

因此，如果您使用特殊的父级，您想在childComponent中执行特殊功能吗？

就像parent1在childComponent中使用function1一样。 parent2在childComponent中使用function2。

function1和function2在childComponent中使用function3。像这样吗？

然后我将使用回调函数。

parent1.component.ts：

  function1(items: any) {
    // do something
  }

parent1.component.html

<app-child [parentFunction1]="function1"></app-child>

child.component.ts

@Input() public parentFunction1: Function;

ngOnInit(){
     this.parentFunction1(this.getItems());
}

Answer 2

您可以将父组件名称传递为@Input

父HTML：

<app-child [parent]="'parent1'"></app-child>

儿童TS：

@Input() parent: string

子HTML：

(change) = "parent == 'parent1'?parent1_function():parent2_function()"

Answer 3

玛丽安娜（Maryannah）发表评论，

在父组件中，

<app-child [options]="data-options" (value_change)="parent_function(value)"></app-child>

在child.component.ts

中

@Output() value_change = new EventEmitter(); .. //other logics .. onValueChange() { value_change.emit(selected_value) }

是否可以在可重用的子组件中执行功能，具体取决于它位于哪个父组件中？

3 个答案: