Angular：将函数传递给哑组件

Question

我正在使用Angular和ngrx编写AWS安全组模块克隆。 我试图将一种方法传递给哑组件以创建新的安全组。

 ... const schemas: any[] = []; @NgModule({ imports: [ CommonModule ], declarations: [ SecurityGroupsComponent, SecurityGroupsTableComponent, SecurityGroupsListComponent ], schemas: schemas, exports: [SecurityGroupsComponent] }) export class SecurityGroupsModule { } 

 import { Component } from '@angular/core'; @Component({ selector: 'app-security-groups-table', templateUrl: './security-groups-table.component.html', }) export class SecurityGroupsTableComponent { onCreateSecurityGroup() { console.log('Create Security Group'); } } 

 <app-security-groups-list [createSecurityGroup]="onCreateSecurityGroup"></app-security-groups-list> 

 import { Component, Input } from '@angular/core'; @Component({ selector: 'app-security-groups-list', templateUrl: './security-groups-list.component.html', }) export class SecurityGroupsListComponent { @Input() createSecurityGroup: Function; selectSecurityGroup(securityGroupId: string) { this.securityGroupSelected.next(securityGroupId); } } 

当呈现模板时，我会遇到以下异常：无法绑定到“ createSecurityGroup”，因为它不是“ app-security-groups-list”的已知属性。

我究竟做错了什么？

Answer 1

似乎您错过了将SecurityGroupsListComponent添加到NgModule 。

使用它之前，请确保执行以下步骤：

@NgModule({
  imports: [...],
  declarations: [SecurityGroupsListComponent]
})

Answer 2

  export const DECLARATIONS = [SecurityGroupsComponent,
                         SecurityGroupsTableComponent,
                        SecurityGroupsListComponent]        

接着

    declarations: DECLARATIONS,
    schemas: schemas,
    exports: DECLARATIONS