Question

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

＆＃13;

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

＆＃13;

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');
    }

}

＆＃13;

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

＆＃13;

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);
    }

}

＆＃13;

当渲染模板时，我得到以下异常：无法绑定到＆＃39; createSecurityGroup＆＃39;因为它不是app-security-groups-list＆＃39;的已知属性。

我做错了什么？

Answer 1

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

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

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

Answer 2

  export const DECLARATIONS = [SecurityGroupsComponent,
                         SecurityGroupsTableComponent,
                        SecurityGroupsListComponent]

然后

    declarations: DECLARATIONS,
    schemas: schemas,
    exports: DECLARATIONS

Angular：将函数传递给哑组件

2 个答案: