Question

我有两个子组件。一个是过滤器，另一个是表。当我单击位于过滤器组件中的按钮时，我想从表组件中调用onInit（）（或做一些更好的刷新表的操作）。我该怎么做？

类似这样的东西：

//function from filter component
filter() { ... }

//function from table component
populateTable(){  .... }


//i want to do something like
filter(){ this.populateTable(); }

Answer 1

我该怎么办

组织为层次结构

- Parent
  - Filter 
  - Table

状态将处于Parent。 Filter中的用户交互仅请求Parent更改状态，从而导致Table的重新呈现。

Answer 2

解决方案1：

@ViewChild('tablecmp') tablecmp: TableComponent;
@Component({
  selector: 'filtercomp',
  .....
}
export class FilterComponent{
   filter(){
     this.tablecmp.table();
   }
}

过滤器组件模板：

<tablecomp #tablecmp></tablecomp>

表组件

@Component({
  selector: 'tablecomp',
  .....
}
export class TableComponent{
   table(){

   }
}

解决方案2：

与其从父组件（filter（））调用子组件函数（table（）），还可以对父组件中的数据应用过滤器，然后使用@input（）将结果发送到子组件以进行显示。 / p>

我们更喜欢Solution2。

两个子组件之间的通信

2 个答案: