Ionic 3 中的指令答案

【问题标题】：Directive in Ionic 3Ionic 3 中的指令
【发布时间】：2017-07-19 08:52:21
【问题描述】：

在 app.module.ts 中声明的 Ionic 2 指令的应用程序中。

但在 Ionic 3（延迟加载）中，该指令不起作用。我尝试在组件模块中导入指令，例如：

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

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

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

类型 GoComponent 是 2 个模块声明的一部分： SignupModule 和 AddPageModule！请考虑将 GoComponent 移至导入的更高模块

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

【问题讨论】：

Ionic 3 iOS build --prod Not Working: Declarations of 2 Modules Error的可能重复

标签： angular ionic-framework ionic2

【解决方案1】：

ionic -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 {}

【讨论】：

【解决方案2】：

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

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

然后，在您需要该指令的页面中导入 XYZDirective。

【讨论】：

【解决方案3】：

在 Ionic 3 内部使用的 Angular 2 及更高版本中，指令或组件不能在两个模块中声明。

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

【讨论】：

【解决方案4】：

我最近在尝试以 --prod 模式构建时遇到了完全相同的错误，除了 Angular 组件。我终于通过从某些指令和组件中删除 .module.ts 文件来修复它。

我已将您的问题标记为重复，因此请重定向至this link 以获得针对您的问题的多种解决方案。

【讨论】：

【解决方案5】：

我不想复制我的答案，但这是我的想法：

import { IonicModule; IonicPageModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { MyComponent } from '../directives/my-directive/my-directive';

@NgModule({
  imports: [
    IonicModule.forRoot(MyApp),
    IonicPageModule.forChild(MyComponent) // Here
  ],
  declarations: [MyApp, MyComponent]
})

原答案：https://stackoverflow.com/a/47253126/1311952

【讨论】：