Question

我正在尝试扩展NgbPopover，以便在调用popover的open或close方法时调度自定义操作。

我有以下设置：

custom-popover.directive.ts

@Directive({  
    selector:'[customPopover]',
    exportAs:'customPopover'
}) 
export class CustomPopover extends NgbPopover {}

some-list.component.ts

<input #quantityInput
       (input)="onInputChange()"
       type="number"

       popoverTitle="Warning!"
       [customPopover]="validationError"
       #validationPopovers="customPopover">

<ng-template #validationError>{{ message }}</ng-template>

我希望它的行为与原始的NgbPopover相同（如果我愿意的话，允许我覆盖open和close方法），但我得到以下错误：

Can't bind to 'customPopover' since it isn't a known property of 'input'.

编辑（显示模块中的声明/导入）：

custom-popover.module.ts

@NgModule({
    declarations: [
        CustomPopover
    ],
    imports: [
        NgbModule
    ],
    exports:[CustomPopover]
})
export class CustomPopoverModule { }

app.module.ts

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

some-list.module.ts

@NgModule({
    imports: [
        ...
        NgbModule,
        CustomPopoverModule
    ],
    ...
})

Answer 1

好的，我发现了这个问题。除了提供selector和exportAs属性之外，还需要添加与选择器对应的Input()字符串，以便将[customPopover]应用于元素，因此指令变为：

@Directive({  
    selector:'[customPopover]',
    exportAs:'customPopover'
}) 
export class CustomPopover extends NgbPopover {
    @Input()
    customPopover: string;
}

在Angular 4中扩展指令

1 个答案: