Question

我正在尝试为angular4中的数据表实现侧面导航。下面是相同的代码。

<mat-sidenav-container class="example-container">
      <mat-sidenav #sidenav mode="over" position="end" style="width: 20%">

        <side-navigation [myFunction]="getAssignmentDetails()"></side-navigation>

      </mat-sidenav>

      <mat-sidenav-content>
        <mat-table [dataSource]="dataSource" matSort>
</mat-table>
</mat-sidenav-containe>

<side-navigation [myFunction]="getAssignmentDetails()"></side-navigation>是我创建的单个组件。如何调用此单个组件的getAssignmentDetails（）函数。

Answer 1

据我了解，您正在尝试使用属于SideNavigationComponent的输出myFunction并触发主机组件的getAssignementDetails方法。

要实现此目的，必须在SideNavigationCompoennt中声明输出，如下所示：

@Component({...})
class SideNavigationComponent {
    @Output() myFunction:EventEmitter<any> = new EventEmitter();
}

要使用此输出，必须在主机模板中使用事件语法：

<side-navigation (myFunction)="getAssignmentDetails()"></side-navigation>

请注意括号，在您的示例中，您使用的是制动踏板（用于输入）。

在SideNavigationComponent中，要触发事件，必须使用以下命令：

this.myFunction.emit('some value');

编辑：

要调用子组件的方法，您必须在宿主组件中引用它。装饰器@ViewChild是您要寻找的。

ex：

@Component({...})
class HostComponent {

    @ViewChild(SideNavigationComponent) nav:SideNavigationComponent;

    someMethod() {
        this.nav.getAssignmetDetails();
    }

}

Angular 4无法从一个组件调用一个组件的功能

1 个答案: