如何在home.html上显示chat.html叠加层 - IONIC 2

Question

简要说明：我的离子项目中有2页。

  

Home.html和chat.html

我想在右侧底部的home.html上显示chat.html作为聊天窗口。我怎样才能做到这一点？

我试图在图像上描绘我想要达到的目标，以便您更好地理解。

请告知。

Answer 1

你可以将chat.html设置为模态或弹出框，并确定它在home.html上方的位置，高度和宽度

Answer 2

尝试下面的代码

<强> home.html的

  <button ion-button block (click)="openModal()">Open Modal</button>

<强> home.ts

import { Component } from '@angular/core';
import { ModalController } from 'ionic-angular';
import { SampleModalPage } from '../sample-modal/sample-modal';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public modalCtrl: ModalController) { }

  openModal() {
    let myModal = this.modalCtrl.create(SampleModalPage);
    myModal.present();
  }
}

<强> chat.html

---- chat code -----
<button ion-button block (click)="closeModal()">Close Modal</button>

<强> chat.ts

import { Component } from '@angular/core';
import { ViewController } from 'ionic-angular';

@Component({
  selector: 'page-sample-modal',
  templateUrl: 'sample-modal.html'
})
export class SampleModalPage {
  constructor(public viewCtrl: ViewController) {}

  closeModal() {
    this.viewCtrl.dismiss();
  }
}

如果您想将一些数据传递到chat.html

openModal() {
  let obj = {userId: '1', name: 'xyz', email: 'xyz@gmail.com'};
  let myModal = this.modalCtrl.create(SampleModalPage, obj);
  myModal.present();
}

您可以在chat.html

中获取数据

 export class SampleModalPage {
      email: string;

      constructor(public navParams: NavParams, public viewCtrl: ViewController) {}
        this.email = this.navParams.get('email');
    }

Answer 3

首先，如果您的homepage使用离子lazyload，则需要在ChatPage中导入home.module.ts，它看起来像这样

home.module.ts

...
import { ChatPageModule} from '../chat/chat.module';
@NgModule({
  declarations: [
    HomePage
  ],
  imports: [
    IonicPageModule.forChild(BackgroundPage),
    ChatPageModule
  ],
})
export class HomePageModule { }

然后，只需将ChatPage选择器添加到您想要的位置，例如：

home.html的

<ion-content padding>
    <div class="chat-container">
        <page-chat></page-chat>
    </div>
    <button ion-button (click)="onClickTest()">Test Click</button>
</ion-content>

home.ts

onClickTest(){
    console.log("I'm fine");
}

home.css

.chat-container {
    width: 200px;
    height: 400px;
    position: absolute;
    right: 16px;
    bottom: 16px;
}

chat.module.ts

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

chat.html

<ion-content padding>
    CHAT PAGE
    <button ion-button (click)="onClickChat()">in Chat</button>
</ion-content>

chat.ts

onClickChat(){
    console.log("from chat with love");
  }

尝试一下，希望这有助于：）