Question

我有2个组件“Home”和“Permissions”。在我的Home.html页面中，我使用“OK”和“CANCEL”按钮创建了一个bootstrap模式。 “OK”需要调用属于“Permissions”组件的函数“deleteRecord（）”。

在此，“Home”是父路线，“Permissions”是子路线

{
path: 'fis', component: HomeComponent,
children: [
  { path: 'Permissions', component: Permissions},
]
}

任何人都可以建议我怎么做。

Answer 1

您可以尝试创建IDeleteRecordComponent

export interface IDeleteRecordComponent{
    deleteRecords();
}

并让您的PermissionsComponent（以及其他10个组件）实现它。然后，从HomeComponent，使用@ViewChild访问这些并调用teir方法：

<强> permissions.component.ts

export class PermissionsComponent implements IDeleteRecords{
    deleteRecords(){
       // implement records deletion
    }
}

<强> home.component.ts

export class HomeComponent {
     @ViewChild("permissions") permissionsComponent: IDeleteRecords;

     deleteRecords(){
         this.permissionsComponent.deleteRecords();
     }
}

<强> home.component.html

<button (click)="deleteRecords()">OK</button>

从component1 html页面本身调用另一个component2函数

1 个答案: