自定义组件Ionic3 + Angular

时间:2018-09-02 14:29:02

标签: angular ionic-framework

我已经创建了一个自定义组件,并将其添加到components.module.ts文件中。

我的项目中有一个名为components的文件夹,其中包含components.module.ts文件。

这是我的components.module.ts文件的外观:

import { NgModule } from '@angular/core';
import { IonicModule} from 'ionic-angular';
import { SendMessageBoxComponent } from './send-message-box/send-message-box.component';

@NgModule({
  declarations: [
    SendMessageBoxComponent
  ],
  imports: [IonicModule],
  exports: [
    SendMessageBoxComponent
  ]
})

export class ComponentsModule {}

然后我要在页面(chatpage)中使用此组件,这就是chat.module.ts文件的外观:

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ChatPage } from './chat';
import { ComponentsModule } from '../../components/components.module';

@NgModule({
  declarations: [
    ChatPage,
  ],
  imports: [
    IonicPageModule.forChild(ChatPage),
    ComponentsModule
  ],
  exports: [
    ChatPage
  ],
})
export class ChatPageModule {}

这是我的chat.module.ts页面:

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ChatPage } from './chat';
import { ComponentsModule } from '../../components/components.module';

@NgModule({
  declarations: [
    ChatPage,
  ],
  imports: [
    IonicPageModule.forChild(ChatPage),
    ComponentsModule
  ],
  exports: [
    ChatPage
  ],
})
export class ChatPageModule {}

这是chat.ts文件代码:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-chat',
  templateUrl: 'chat.html',
})
export class ChatPage {
  user: any;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewWillLoad(){
    this.user = this.navParams.get('data');
  }

}

我得到了:

模板解析错误:“ app-send-message-box”不是已知元素

我在这里做什么错了?

谢谢!

0 个答案:

没有答案