离子 3 中的指令

Question

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

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

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

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

GoComponent 类型是 2 个模块声明的一部分： 注册模块和添加页面模块！请考虑将 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 内部使用的 Angular 2 及以上版本中，指令或组件不能在两个模块中声明。

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

Answer 3

在 ionic -3 中声明组件中的指令已更改，实际上它将由模块本身绑定。

此问题的解决方案如下

解决方案 - 1

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

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

在你的模块中，你可以导入共享指令

解决方案 - 2

在模块中绑定指令并使用.forchild((导入到子组件;

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

Answer 4

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

我将您的问题标记为重复，因此请重定向到此链接以获取针对您的问题的几种解决方案。

Answer 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