如何在 Ionic 中打开一个组件

How to open a Component in Ionic

我有一个主页(默认主页)和一个 Components 文件夹,里面有一个名为 login-page 的 Component 内容,其中包含 html、ts , css, 问题是如何从我的 Home 页面打开这个组件?我试着做这样的事情:

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

然后在构造函数中

navCtrl.push(LoginPageComponent );

有什么想法吗?

您不能将普通组件用作页面。将页面用作 Page,将组件用作 Component。使用 ionic g page Login 创建页面 将 html、css、ts 复制到此页面,然后删除该组件。

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

当您的组件选择器是 "login-box" 时,您可以在 AnotherPage.ts

中包含这样的组件
<ion-content>
   <login-box></login-box>
</ion-content>

可以使用ModalController来推送组件,例如:

export class AnyPage {

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

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