如何在 Ionic 中打开组件答案

【问题标题】：How to open a Component in Ionic如何在 Ionic 中打开组件
【发布时间】：2018-05-05 05:10:34
【问题描述】：

我有一个主页（默认），我有一个 Components 文件夹，里面有一个名为 login-page 的 Component 东西，其中包含 html、ts、css，问题是我如何打开这个组件来自我的Home 页面？我试图做这样的事情：

import { LoginPageComponent } from '../../components/login-page/login-page';

然后在构造函数中

navCtrl.push(LoginPageComponent );

有什么想法吗？

【问题讨论】：

标签： angular ionic-framework ionic2

【解决方案1】：

您不能将普通组件用作页面。将页面用作页面，将组件用作组件。用ionic g page Login创建一个Page 复制html、css、ts到这个页面，然后删除组件。

当您想使用该组件时，您必须在另一个组件或页面的 html 中包含带有 @Component 部分中定义的选择器的组件。

当您的组件选择器是“登录框”时，您可以在 AnotherPage.ts 中包含这样的组件

<ion-content>
   <login-box></login-box>
</ion-content>

【讨论】：

【解决方案2】：

您可以使用 ModalController 来推送组件，例如：

export class AnyPage {

  constructor(modalCtrl: ModalController) {
     let modal = this.modalCtrl.create(LoginPageComponent);
     modal.present();
  }
}

但实际上，我认为您应该使用 Page 而不是组件，就像 fastr.de 告诉您的那样。在终端中运行命令“ionic generate page Login”，然后就可以使用 NavController 服务了。

【讨论】：