Angular 如何在爱奥尼亚2的home.html上显示chat.html覆盖

我的爱奥尼亚项目中有两页：

• home.html
• chat.html

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

我试图用一种形象来描绘我想要实现的目标：

试试下面的代码

home.html

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

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

chat.html

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

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

如果要将某些数据传递到

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');
    }

---

您可以将chat.html设置为modal或popover，并确定它在home.html上方的位置、高度和宽度。html

首先，如果您的

主页

使用的是爱奥尼亚

lazyload

，您需要在

home.module.ts

中导入

ChatPage

，它将如下所示

home.module.ts

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

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

然后，只需在需要的位置添加

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.css

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

---

chat.module.ts

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

@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>

---

试试看，希望这能有所帮助：）

在home.html文件中动态添加chat.html。如果您的条件为真，那么它将显示在home.html中。此外，您还必须提供两个文件z-index以覆盖chat.htmlhow以动态添加它？如何使它看起来像一个窗口，你能给我指一些类似的东西，或者一些基本的代码吗好的，我已经测试了上面的代码，它禁用了后页，我们想要的是，我们应该能够聊天，背景页不应该被禁用，这样我们就可以在这两个页面上工作，附屏幕截图-，

这个问题的解决方案是什么？

我将实现这个并返回