代码之家  ›  专栏  ›  技术社区  ›  Anuj TBE

无法使用在6的子模块中的应用程序模块内声明的指令

  •  2
  • Anuj TBE  · 技术社区  · 6 年前

    我在用 Angular 6

    我已经宣布了一项指令 通过扩展 NBG端口 并加入了 declaration 属于 app.module.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 { }
    

    应用模块ts 文件。

    的内容

    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();
      }
    
    }
    

    我有一个模块 它是在 AdminModule 里面进一步声明

    当我使用 粘胶 的模板内的指令 模块式

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

    它给出的错误是

    can't bind to 'popoverTitle' since it isn't a known property of i
    

    当我把指令移到 模块并将其包含在 已保存-searches.module.ts 宣言 ,工作正常,无误。

    但是我不能在其他模块中使用它,在其他模块中使用它

    StickyPopovoerDirective是2个模块声明的一部分。

    1 回复  |  直到 6 年前
        1
  •  16
  •   Suren Srapyan    6 年前

    该指令仅适用于 AppModule SharedModule . 然后添加 StickyPopoverDirective 申报和出口。

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

    共享模块