如何在angular 2项目中使用ionic 2的组件？

Question

我想在我的angular 2项目的一个功能模块中使用ionic 2。我想在我的一些组件中使用离子的组件或标签。我做过的每件事，但我得到了这个错误EXCEPTION: Expected to not be in Angular Zone, but it is!

有人能告诉我如何在angular 2项目中使用ionic 2的组件，而不是使用ionic-cli来创建一个新的吗？

Answer 1

首先使用以下命令创建一个angular 2项目

ng new myapp --style=scss

然后

cd myapp
npm install --save ionic-angular ionicons

您可能会收到一些警告，例如

npm WARN ionic-angular@2.0.0-rc.2 requires a peer of @angular/common@2.1.1 but none was installed.
npm WARN ionic-angular@2.0.0-rc.2 requires a peer of @angular/compiler@2.1.1 but none was installed.
...

它甚至可以处理警告，但如果您更喜欢摆脱所有这些警告，您可以使用以下命令检查离子角度声明的内容：

npm view ionic-angular peerDependencies

然后相应地更新package.json和npm install.中的版本，您还可以删除@angular/router，因为Ionic提供了自己的导航机制。

npm uninstall --save @angular/router

然后是ng serve

在项目中使用Ionic的下一步是更改src/app/app.module.ts以导入IonicModule，而不是Angular的BrowserModule，并引导IonicApp：

import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';

import { AppComponent } from './app.component';

@NgModule({
  imports: [ IonicModule.forRoot(AppComponent) ],
  declarations: [ AppComponent ],
  bootstrap: [ IonicApp ]
})
export class AppModule { }

IonicApp组件使用ion-app作为其选择器，因此您还需要修改src/index.html，将其替换为。

要使项目结构与Ionic CLI生成的内容有点类似，请创建一个src/主题文件夹，然后下载这两个文件并将其放入该文件夹中: ionic.scss和variables.scss。

最后，通过编辑angular-cli.json将它们包含在构建过程中，以便首先在app内的样式中加载variables.scss：

"styles": [
  "theme/variables.scss",
  "styles.scss"
],

请注意，您必须重新启动ng serve才能使此更改生效。

拥有一个基本的离子应用程序的最后一步是创建一个页面组件，并使用ion-nav将其加载到AppComponent中。

为此，请创建一个src/pages文件夹，其中包含一个包含以下内容的home.page.ts文件：

import { Component } from '@angular/core';

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

  message = 'Welcome!';

}

以及对应的home.page.html模板，包含一个基本的离子页面，包括头部和内容：

<ion-header>
  <ion-navbar>
    <ion-title>Ionic App</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  {{ message }}
</ion-content>

您可以从ionic2-with-angular-cli .Hope获取完整的文档，这对您很有帮助。