离子3指令

Question

在应用程序上，离子2指令在app.module.ts中声明。

但是在Ionic 3(懒惰负载)中，这个指令不起作用。我试图在组件模块中导入指令，例如：

...
import { TabindexDirective } from '../../../app/tabindex.directive';

@NgModule({
  declarations: [
    ...
    TabindexDirective,
  ],
  imports: [
   ...
  ],
  exports: [
    ...
  ],
})
export class SignupModule {}

这段代码工作正常，但是我在另一个组件模块中导入了这个指令，我有错误：

类型GoComponent是两个模块声明的一部分: SignupModule和AddPageModule！请考虑将GoComponent移到导入的更高模块上

如何在Ionic 3中修复它并使用指令？

Answer 1

同样的事情也发生在我最近的项目上。这个问题的解决方案是在directives.module.ts中导入指令，例如：

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

并且，在需要指令的页面中导入XYZDirective。

Answer 2

在Ionic 3内部使用的角2及以上，不能在两个模块中声明指令或组件。

您需要创建一个公共模块，在该模块中，需要在其他模块中重用的所有组件都应该声明。然后，您可以在您希望使用组件的任何模块中导入此公共模块。

Answer 3

在组件中声明指令在离子型-3中发生了变化，实际上它将被模块本身绑定。

解决此问题的方法如下

解决方案- 1

在一个模块中声明和导出所有指令，这样您就可以在模块/离子页面中使用它

import { NgModule } from '@angular/core';
import { TabindexDirective } from '../../../app/tabindex.directive';
@NgModule({
    declarations: [TabindexDirective],
    imports: [],
    exports: [TabindexDirective]
})
export class SharedDirectives {}

在您的模块中您可以导入SharedDirectives

解决方案- 2

绑定模块中的指令并使用.forchild()导入到子组件；

import { TabindexDirective } from '../../../app/tabindex.directive';
@NgModule({
  declarations: [
    TabindexDirective,
  ],
  imports: [
    ...
    IonicPageModule.forChild(TabindexDirective)
  ],

})
export class SignupModule {}