Skip to main content

添加到现有的 Angular 项目

本指南介绍了如何将 Ionic Angular 添加到现有的 Angular 项目中。如果你想从头开始创建新项目，请参阅 Ionic Angular 快速入门 指南。有关 Ionic Angular 如何与 Angular 配合工作（包括版本支持和工具）的概述，请参阅 Ionic Angular 概览。

🌐 This guide covers how to add Ionic Angular to an existing Angular project. If you're looking to start a new project from scratch, check out the Ionic Angular Quickstart guide. For an overview of how Ionic Angular works with Angular, including version support and tooling, check out the Ionic Angular Overview.

tip

本指南使用 .css 文件扩展名作为样式表。如果你使用不同的样式表格式（例如 .scss、.sass 或 .less）创建了 Angular 应用，请改用该扩展名。

🌐 This guide uses .css file extensions for stylesheets. If you created your Angular app with a different stylesheet format (such as .scss, .sass, or .less), use that extension instead.

设置​

🌐 Setup

info

本指南遵循使用 Angular CLI 创建的 Angular 应用的结构。如果你使用其他方法启动了 Angular 应用，你的文件结构和设置可能会有所不同。

🌐 This guide follows the structure of an Angular app created with the Angular CLI. If you started your Angular app using a different method, your file structure and setup may differ.

你可以使用 Angular CLI 的 ng add 功能将 Ionic Angular 添加到你现有的 Angular 项目中，或者通过手动安装来实现。

🌐 You can add Ionic Angular to your existing Angular project using the Angular CLI's ng add feature or by installing it manually.

使用 ng add​

🌐 Using ng add

添加 Ionic Angular 的最简单方法是使用 Angular CLI 的 ng add 功能：

🌐 The easiest way to add Ionic Angular is to use the Angular CLI's ng add feature:

ng add @ionic/angular

这将安装 @ionic/angular 包并自动配置所需的导入和样式。

🌐 This will install the @ionic/angular package and automatically configure the necessary imports and styles.

手动安装​

🌐 Manual Installation

如果你更愿意手动安装 Ionic Angular，可以按照以下步骤进行：

🌐 If you prefer to install Ionic Angular manually, you can follow these steps:

1. 安装软件包​

🌐 1. Install the Package

npm install @ionic/angular

2. 添加 Ionic 框架样式表​

🌐 2. Add Ionic Framework Stylesheets

用以下内容替换 angular.json 中现有的 styles 数组：

🌐 Replace the existing styles array in angular.json with the following:

angular.json
"styles": [
  "src/styles.css",
  {
    "input": "node_modules/@ionic/angular/css/core.css"
  },
  {
    "input": "node_modules/@ionic/angular/css/normalize.css"
  },
  {
    "input": "node_modules/@ionic/angular/css/structure.css"
  },
  {
    "input": "node_modules/@ionic/angular/css/typography.css"
  }
]
info

虽然需要使用 core.css，但 normalize.css、structure.css 和 typography.css 是推荐使用的，但不是必需的。它们可以统一不同浏览器的差异，确保正确的滚动行为，并提供一致的排版和表单样式。如果不使用它们，你可能需要自己处理这些问题。更多详情，请参阅 全局样式表。

🌐 While core.css is required, normalize.css, structure.css, and typography.css are recommended but not required. They normalize cross-browser differences, ensure proper scrolling behavior, and provide consistent typography and form styling. Without them, you may need to handle these concerns yourself. For more details, refer to Global Stylesheets.

3. 配置 Ionic Angular​

🌐 3. Configure Ionic Angular

更新 src/app/app.config.ts 以包含 provideIonicAngular：

🌐 Update src/app/app.config.ts to include provideIonicAngular:

src/app/app.config.ts
import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideIonicAngular } from '@ionic/angular/standalone';

export const appConfig: ApplicationConfig = {
  providers: [
    provideBrowserGlobalErrorListeners(),
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    provideIonicAngular({}),
  ],
};

使用单个组件​

🌐 Using Individual Components

完成上述设置后，你可以在现有的 Angular 应用中开始使用 Ionic 组件。以下是如何使用它们的示例：

🌐 After completing the setup above, you can start using Ionic components in your existing Angular app. Here's an example of how to use them:

将 src/app/app.html 更新为以下内容：

🌐 Update src/app/app.html to the following:

src/app/app.html
<ion-button>Button</ion-button> <ion-datetime></ion-datetime>

然后，在 src/app/app.ts 中导入组件：

🌐 Then, import the components in src/app/app.ts:

src/app/app.ts
import { Component } from '@angular/core';
import { IonButton, IonDatetime } from '@ionic/angular/standalone';

@Component({
  selector: 'app-root',
  imports: [IonButton, IonDatetime],
  templateUrl: './app.html',
  styleUrl: './app.css',
})
export class App {}

访问 components 页面以获取所有可用的 Ionic 组件。

🌐 Visit the components page for all of the available Ionic components.

使用 Ionic 页面​

🌐 Using Ionic Pages

如果你想使用带有完整导航和页面过渡效果的 Ionic 页面，请按照以下额外的设置步骤操作。

🌐 If you want to use Ionic pages with full navigation and page transitions, follow these additional setup steps.

1. 添加额外的 Ionic 框架样式表​

🌐 1. Add Additional Ionic Framework Stylesheets

用以下内容替换 angular.json 中现有的 styles 数组：

🌐 Replace the existing styles array in angular.json with the following:

angular.json
"styles": [
  "src/styles.css",
  {
    "input": "node_modules/@ionic/angular/css/core.css"
  },
  {
    "input": "node_modules/@ionic/angular/css/normalize.css"
  },
  {
    "input": "node_modules/@ionic/angular/css/structure.css"
  },
  {
    "input": "node_modules/@ionic/angular/css/typography.css"
  },
  {
    "input": "node_modules/@ionic/angular/css/display.css"
  },
  {
    "input": "node_modules/@ionic/angular/css/padding.css"
  },
  {
    "input": "node_modules/@ionic/angular/css/float-elements.css"
  },
  {
    "input": "node_modules/@ionic/angular/css/text-alignment.css"
  },
  {
    "input": "node_modules/@ionic/angular/css/text-transformation.css"
  },
  {
    "input": "node_modules/@ionic/angular/css/flex-utils.css"
  },
  {
    "input": "src/theme/variables.css"
  }
]

这些样式表设置了整体页面结构，并提供了用于更快速开发的 CSS 工具。有些样式表是可选的。有关哪些样式表是必需的详细信息，请查看 全局样式表。

🌐 These stylesheets set up the overall page structure and provide CSS utilities for faster development. Some stylesheets are optional. For details on which stylesheets are required, check out Global Stylesheets.

2. 设置主题​

🌐 2. Set up Theming

创建一个包含以下内容的 src/theme/variables.css 文件：

🌐 Create a src/theme/variables.css file with the following content:

src/theme/variables.css
/**
 * Ionic Dark Theme
 * -----------------------------------------------------
 * For more info, please refer to:
 * https://ionic.nodejs.cn/theming/dark-mode
 */

/* @import "@ionic/angular/css/palettes/dark.always.css"; */
/* @import "@ionic/angular/css/palettes/dark.class.css"; */
@import '@ionic/angular/css/palettes/dark.system.css';

当系统设置为偏好深色外观时，此文件为你的 Ionic 应用启用夜间模式支持。你可以通过取消注释不同的深色调色板导入或添加自定义 CSS 变量来自定义主题行为。

🌐 This file enables dark mode support for your Ionic app when the system is set to prefer a dark appearance. You can customize the theming behavior by uncommenting different dark palette imports or adding custom CSS variables.

3. 更新应用组件​

🌐 3. Update the App Component

将 src/app/app.html 更新为以下内容：

🌐 Update src/app/app.html to the following:

src/app/app.html
<ion-app>
  <ion-router-outlet></ion-router-outlet>
</ion-app>

然后，更新 src/app/app.ts 以包含组件导入：

🌐 Then, update src/app/app.ts to include the component imports:

src/app/app.ts
import { Component } from '@angular/core';
import { IonApp, IonRouterOutlet } from '@ionic/angular/standalone';

@Component({
  selector: 'app-root',
  imports: [IonApp, IonRouterOutlet],
  templateUrl: './app.html',
  styleUrl: './app.css',
})
export class App {}

4. 创建首页​

🌐 4. Create a Home Page

首先在 src/app/home/home.html 添加一个模板：

🌐 Start by adding a template at src/app/home/home.html:

src/app/home/home.html
<ion-header translucent="true">
  <ion-toolbar>
    <ion-title>Home</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content fullscreen="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Home</ion-title>
    </ion-toolbar>
  </ion-header>

  <div id="container">
    <strong>Ready to create an app?</strong>
    <p>
      Start with Ionic
      <a target="_blank" rel="noopener noreferrer" href="https://ionic.nodejs.cn/components">UI Components</a>
    </p>
  </div>
</ion-content>

然后，使用以下内容创建 src/app/home/home.ts：

🌐 Then, create src/app/home/home.ts with the following:

src/app/home/home.ts
import { Component } from '@angular/core';
import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';

@Component({
  selector: 'app-home',
  imports: [IonContent, IonHeader, IonTitle, IonToolbar],
  templateUrl: './home.html',
  styleUrl: './home.css',
})
export class HomePage {}

最后，添加一个 src/app/home/home.css 文件：

🌐 Finally, add a src/app/home/home.css file:

src/app/home/home.css
#container {
  text-align: center;

  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

#container strong {
  font-size: 20px;
  line-height: 26px;
}

#container p {
  font-size: 16px;
  line-height: 22px;

  color: #8c8c8c;

  margin: 0;
}

#container a {
  text-decoration: none;
}

5. 设置路由​

🌐 5. Set up Routing

更新 src/app/app.routes.ts 以添加 home 路由：

🌐 Update src/app/app.routes.ts to add a home route:

src/app/app.routes.ts
import { Routes } from '@angular/router';
import { HomePage } from './home/home';

export const routes: Routes = [
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full',
  },
  {
    path: 'home',
    component: HomePage,
  },
];

一切就绪！你的 Ionic Angular 应用现在已配置了完整的 Ionic 页面支持。运行 ng serve 来启动开发服务器并查看你的应用。

🌐 You're all set! Your Ionic Angular app is now configured with full Ionic page support. Run ng serve to start your development server and view your app.

下一步​

🌐 Next Steps

既然你已经将 Ionic Angular 集成到你的项目中，请查看：

🌐 Now that you have Ionic Angular integrated into your project, check out:

导航

了解如何在 Ionic Angular 应用中使用 Angular Router 处理路由和导航。

组件

探索 Ionic 丰富的 UI 组件库，用于构建美观的应用。

主题化

了解如何使用 Ionic 强大的主题系统自定义应用的外观和感觉。

电容器文档

探索如何访问本地设备功能，并使用 Capacitor 将你的应用部署到 iOS、Android 和网络。

目录