angular - 在 Angular 4 中扩展指令

Question

我正在尝试扩展 NgbPopover为了在弹出框的 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;
}