Ionic3延遲加載意外加載的指令

Question

我正在使用Ionic3，並且正在實現延遲加載以提高啟動性能。

我已經轉換了以下內容：

loginemail.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { LoginEmailPage } from './loginemail';
import { ControlMessages } from '../validation/controlMessages';

@NgModule({
  declarations: [LoginEmailPage],
  imports: [IonicPageModule.forChild(LoginEmailPage), ControlMessages],
})
export class LoginEmailPageModule { }

如您所見，我導入了ControlMessages ，這是一個自定義組件（與app.module.ts導入的急切加載完美配合使用）。

但是，當我嘗試訪問LoginEmailPage ，出現以下運行時錯誤：

core.es5.js:1085 ERROR Error: Uncaught (in promise): Error: Unexpected directive 'ControlMessages' imported by the module 'LoginEmailPageModule'. Please add a @NgModule annotation.
Error: Unexpected directive 'ControlMessages' imported by the module 'LoginEmailPageModule'. Please add a @NgModule annotation.

任何建議表示贊賞。

ps ControlMessages仍會導入到app.module.ts以用於其他使用它的頁面。

controlMessages.ts

import { Component, Input } from '@angular/core';
import { FormControl } from '@angular/forms';
import { ValidationService } from './validationService';

@Component({
  selector: 'control-messages',
  template: `<div *ngIf="errorMessage !== null">{{errorMessage}}</div>`
})
export class ControlMessages {
  @Input() control: FormControl;

  constructor() {

  }

  get errorMessage(): string {
    for (let propertyName in this.control.errors) {
      if (this.control.errors.hasOwnProperty(propertyName) && this.control.touched) {
        return ValidationService.getValidatorErrorMessage(propertyName, this.control.errors[propertyName]);
      }
    }

    return null;
  }
}

Answer 1

需要創建一個ControlMessagesModule ，而不是導入它。

import { NgModule } from '@angular/core';
import { IonicModule } from 'ionic-angular';
import { CommonModule } from '@angular/common';
import { ControlMessages } from './controlMessages';

@NgModule({
  declarations: [ControlMessages],
  imports: [
    CommonModule,
    IonicModule
  ],
  exports: [ControlMessages]
})
export class ControlMessagesModule { } 

和

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { LoginEmailPage } from './loginemail';
import { ControlMessagesModule } from '../validation/controlMessages.module';

@NgModule({
  declarations: [LoginEmailPage],
  imports: [IonicPageModule.forChild(LoginEmailPage), ControlMessagesModule],
  exports: [LoginEmailPage]
})
export class LoginEmailPageModule { }