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