Angular 4 / ionic 3 自定义属性指令不起作用

Question

您好，我正在尝试专注于搜索输入字段。我为此创建了一个指令。它是从directives.module.ts 中导出的。我也将directives.module 导入到app.module.ts 中。每当我尝试在 ion-searchbar 中使用该指令时，都会出现以下错误。我不知道我错过了什么。

Can't bind to 'focuser' since it isn't a known property of 'ion-searchbar'.

directives.module.ts

import { NgModule } from '@angular/core';
import { FocuserDirective } from './focuser/focuser';
@NgModule({
    declarations: [FocuserDirective],
    imports: [],
    exports: [FocuserDirective]
})
export class DirectivesModule {}

focuser.ts

import {Directive, Renderer, ElementRef} from "@angular/core";

/**
 * Generated class for the FocuserDirective directive.
 *
 * See https://angular.io/api/core/Directive for more info on Angular
 * Directives.
 */
@Directive({
  selector: '[focuser]' // Attribute selector
})
export class FocuserDirective {

  constructor(public renderer: Renderer, public elementRef: ElementRef) {}

    ngOnInit() {
      //search bar is wrapped with a div so we get the child input
      const searchInput = this.elementRef.nativeElement.querySelector('input');
      setTimeout(() => {
        //delay required or ionic styling gets finicky
        this.renderer.invokeElementMethod(searchInput, 'focus', []);
      }, 0);
    }

}

app.module.ts

import { DirectivesModule } from '../directives/directives.module';


export function provideSettings(storage: Storage) {

  return new Settings(storage, {
    option1: true,
    option2: 'Ionitron J. Framework',
    option3: '3',
    option4: 'Hello'
  });
}

@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    BrowserModule,
    HttpModule,
    AutoCompleteModule,
    CalendarModule,
    DirectivesModule,
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot()
  ],
  exports: [
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ],
  providers: [
    Api,
    User,
    SplashScreen,
    StatusBar,
    Constants,
    { provide: Settings, useFactory: provideSettings, deps: [Storage] },
    // Keep this to enable Ionic's runtime error handling during development
    { provide: ErrorHandler, useClass: IonicErrorHandler },
    BoxProvider,
    TellersProvider,
    CheckoutProvider,
    CommonProvider,
  ]
})
export class AppModule { }

Answer 1

您需要从app.module.ts 文件中完全删除DirectivesModule 模块，并在使用directive 的page's module 中删除imports（即focuser）。