在 Angular 4 中扩展指令答案

【问题标题】：Extending Directives in Angular 4在 Angular 4 中扩展指令
【发布时间】：2018-04-11 07:33:23
【问题描述】：

我正在尝试扩展 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
    ],
    ...
})

【问题讨论】：

您可能没有将其添加到模块的declarations: [...] 和exports: [...] 或未导入您正在使用它的模块。
已编辑以显示声明和导出。我承认在我从模板中得到最后一个错误（似乎）之前，我已经和那些人斗争了一段时间。但这些错误通常抱怨[customPopover] 没有被导出。
仍然找不到错误。你能尝试在stackblitz.com中重现吗？

标签： angular angular-ui-bootstrap angular-directive ng-bootstrap bootstrap-popover

【解决方案1】：

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

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

【讨论】：

正在遵循此示例，但未能成功。你有 plunker 或有工作解决方案的东西吗？
不用担心，我有解决方案！还是谢谢你的回复?
@Micko，请分享您的解决方案
@azerafati 这里是我的问题的链接，并且我发布了已接受的答案:) 如果您有任何问题，请告诉我。 stackoverflow.com/questions/61010439/…