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'.

编辑（在模块中显示 declarations/imports）：

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 中的扩展指令

Extending Directives in Angular 4

angular-ui-bootstrap

bootstrap-popover

angular-directive

ng-bootstrap

angular