Question

我正在使用Angular 6。

我通过扩展 NbgPopover 来声明了指令 StickyPopover ，并在declaration的{{1}}中添加了

app.module.ts

，指令的位置与 app.module.ts 文件的位置相同。

sticky-popover.directive.ts 的内容是

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { AuthLayoutComponent } from './layouts/auth-layout/auth-layout.component';
import {AdminLayoutComponent} from './layouts/admin-layout/admin-layout.component';
import {FormsModule} from '@angular/forms';
import {RouterModule} from '@angular/router';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import {StickyPopoverDirective} from './sticky-popover.directive';


@NgModule({
  declarations: [
    AppComponent,
    AuthLayoutComponent,
    AdminLayoutComponent,
    StickyPopoverDirective           // custom created directive
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    FormsModule,
    HttpClientModule,
    RouterModule,
    NgbModule.forRoot(),
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule { }

我有一个模块 SavedSearches ，该模块导入了import { ElementRef, Directive, Input, TemplateRef, EventEmitter, Renderer2, Injector, ComponentFactoryResolver, ViewContainerRef, NgZone, OnInit, OnDestroy } from '@angular/core'; import { NgbPopover, NgbPopoverConfig } from '@ng-bootstrap/ng-bootstrap'; @Directive({ selector: '[appStickyPopover]', exportAs: 'stickyPopover' }) export class StickyPopoverDirective extends NgbPopover implements OnInit, OnDestroy { @Input() stickyPopover: TemplateRef<any>; popoverTitle: string; placement: 'auto' | 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'left-top' | 'left-bottom' | 'right-top' | 'right-bottom' | ('auto' | 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'left-top' | 'left-bottom' | 'right-top' | 'right-bottom')[]; triggers: string; container: string; shown: EventEmitter<{}>; hidden: EventEmitter<{}>; ngpPopover: TemplateRef<any>; canClosePopover: boolean; toggle(): void { super.toggle(); } isOpen(): boolean { return super.isOpen(); } constructor( private _elRef: ElementRef, private _render: Renderer2, injector: Injector, componentFactoryResolver: ComponentFactoryResolver, private viewContainerRef: ViewContainerRef, config: NgbPopoverConfig, ngZone: NgZone ) { super(_elRef, _render, injector, componentFactoryResolver, viewContainerRef, config, ngZone, document); this.triggers = 'manual'; this.popoverTitle = 'Permissions'; this.container = 'body'; } ngOnInit(): void { super.ngOnInit(); this.ngbPopover = this.stickyPopover; this._render.listen(this._elRef.nativeElement, 'mouseenter', () => { this.canClosePopover = true; this.open(); }); this._render.listen(this._elRef.nativeElement, 'mouseleave', (event: Event) => { setTimeout(() => { if (this.canClosePopover) { this.close(); } }, 100); }); this._render.listen(this._elRef.nativeElement, 'click', () => { this.close(); }); } ngOnDestroy(): void { super.ngOnDestroy(); } open() { super.open(); const popover = window.document.querySelector('.popover'); this._render.listen(popover, 'mouseover', () => { this.canClosePopover = false; }); this._render.listen(popover, 'mouseout', () => { this.canClosePopover = true; setTimeout(() => { if (this.canClosePopover) { this.close(); } }, 0); }); } close() { super.close(); } }内部，并在 app.module.ts

中进一步声明了

当我在 SavedSearches 模块之类的模板中使用 StickyPopover 指令时，

AdminModule

它给出错误为

<i class="fa fa-plus-circle" aria-hidden="true" appStickyPopover [popoverTitle]="additional" [autoClose]="true" data-placement="right"></i>

当我将指令移动到 SavedSearches 模块中并将其包含在 saved-searches.module.ts can't bind to 'popoverTitle' since it isn't a known property of i中时，它可以正常工作而不会出现任何错误

但是然后我不能在其他模块中使用它，而在其他模块中使用它会给出

StickyPopovoerDirective是2个模块的声明的一部分。将其移动到导入这两个模块的上部模块中。

Answer 1

该指令仅对AppModule可见，如果要将其用于其他模块，则可以创建SharedModule。然后将StickyPopoverDirective添加到声明和导出中。

@NgModule({
  declarations: [StickyPopoverDirective],
  exports: [StickyPopoverDirective]    
})
export class SharedModule { }

此后，您可以将SharedModule导入另一个模块并在其中使用指令。

不能在Angular 6的子模块的app模块内部声明的指令使用

1 个答案: