Ionic From Scratch：编辑你的Ionic项目

在这篇文章中，我们将看看 ionic 页面。我将向您展示如何在您的应用程序中编辑内容，以及如何创建其他应用程序页面和设置导航。

编辑页面内容

在Getting Started With Ionic中，我们学习了如何创建我们的第一个 Ionic 项目。从那里继续，在本教程中，我们将编辑为我们的应用程序创建的页面之一。 

为了编辑我们的页面，我们需要使用文本编辑器工具打开我们的项目。就我而言，我将使用 Visual Studio Code，但请随意使用您自己喜欢的文本编辑器。打开项目后，它应该类似于下图（请注意，我们会打开整个项目文件夹，而不仅仅是特定页面）：

Ionic 使用的页面文件包含所有必要的文件，您需要对应用程序中的任何给定页面进行更改。这些页面可以在Ionic 项目的src文件夹下的文件夹中找到。

我们将通过编辑主页对我们的 Ionic 应用程序进行简单的更改。为此，请导航到src/pages/home 中的home.html文件， 并对文件进行以下更改：

<ion-header>
  <ion-navbar>
    <ion-title>My Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h2>Welcome to My Ionic App!</h2>
  <p>
    This is super awesome.
  </p>
  <p>
    This is my 1st Ionic app ever.
  </p>
</ion-content>

完成后，导航到 home.s css 文件，也在 src/pages/home中， 并进行以下更改：

page-home {

    ion-content {
        background: black !important;
    }

    h2 {
        color: white;
    }

    p {
        color: white;
    }

}

在这里，我们通过定位将首页的背景颜色从白色改为黑色 ion-content。这是我们的页面内容存在的地方。此外，我们还针对 h2 header 元素和 p (paragraph) 元素，并将两者的文本颜色更改为白色。

完成更改后（不要忘记保存），运行其中一个 ionic serve或ionic lab 从命令行运行。这些 Ionic CLI 工具将编译您的应用程序并使其可用于测试。我将ionic lab 在这个例子中使用。 

一旦你成功运行了这些命令中的任何一个，你的本地开发服务器应该启动你的应用程序，它应该看起来像这样：

离子页面结构

因此，我们通过更改页面的文本和背景颜色来编辑主页。我们是怎么做到的？我们的主页文件夹包含三个文件：  home.html 、 home.scss和home.ts。 

home.ts文件是一个打字稿文件，它由一个带有以下组件装饰器的 angular 组件组成：

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

home.html文件充当组件的模板，我们可以使用它来更改我们的主页内容。它由组件装饰器templateUrl 的参数指定。

要更改主页的样式，我们可以在home.scss文件中使用 CSS 或 SCSS。 

创建附加页面

接下来，我们将在我们的应用程序中创建一个名为info的附加页面。为了创建这个新页面，我们需要在我们的项目中运行以下命令 ionic generate page info：在 Visual Studio Code 中，我们可以通过从View > Integrated Terminal打开集成终端来实现。只需在此处键入命令并按Enter。

这将在您的项目中生成一个新页面，其中包含文件info.html、info.ts和info.scss。 

页面生成成功后，您应该可以在项目文件的 pages 文件夹下看到它。为了让我们能够在我们的应用程序中使用这个新创建的页面，我们需要首先在我们的app.module.ts文件中注册它。您可以在src/app文件夹中找到它。 

首先，在app.module.tsimport顶部附近为您的信息页面的组件文件添加一条语句。

import { InfoPage } from '../pages/info/info';

您可以将其添加import到其他页面的语句下方。

然后，添加InfoPage到应用模块的declarations和数组中。entryComponents您的@NgModule声明现在应如下所示：

@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
    InfoPage
  ],

//...

  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
    InfoPage
  ],
  
//...

离子导航

在最简单的形式中，Ionic将推送 和弹出页面 作为其导航概念。这个想法是我们将页面堆叠在一起——当我们打开一个新页面时，我们将它压入堆栈，当我们返回上一页时，我们将当前页面弹出。 

因此，当您在 Ionic 应用程序中查看页面时，您总是在查看堆栈中最顶层的页面，如果您单击查看不同的页面，您将把该页面推送到导航堆栈的顶部，覆盖前一页风景。 

如果您要返回上一页，那么您将从堆栈中弹出当前页面并查看其下方的页面。把它想象成一副纸牌，你可以在其中添加和移除纸牌。

添加导航按钮

继续我们的示例，在我们的应用程序中成功创建和注册页面后，让我们从主页设置导航到新创建的页面。 

使用我们之前编辑的主页，让我们通过添加一个允许我们导航到信息页面的按钮来进一步自定义它。将以下代码添加到 home.html的 ion-content 内部和段落文本下方：

  <button ion-button>Navigate to Info</button>

上面的代码指定了一个 Ionic 组件，即ion-button. 稍后我们将添加一个单击处理程序，因此当按下此按钮时，我们将导航到信息页面。 

您的主页现在应该与此类似：

但是，如果我们现在要单击新创建的按钮，它不会带我们去任何地方，因为我们还没有为它编程任何功能。为此，我们需要在按钮上添加一个单击***器事件，然后是一个函数，如下所示：

<button ion-button (click)="navigateToInfo()">Navigate to Info</button>

接下来，让我们继续 navigateToInfo()在home.ts文件中声明我们上面编写的函数。首先，从核心库中导入NavController帮助程序。允许我们在 Ionic 应用程序中管理导航，当单击按钮时，我们将使用它将信息页面推送到主页顶部。 ionic-angularNavController

我们还需要导入InfoPage组件。将这些行放在home.ts文件的顶部。

import { NavController } from 'ionic-angular';
import { InfoPage } from '../info/info';

接下来，我们将修改主页组件以通过依赖注入接收 NavController 的实例。将主页构造函数更改为以下内容：

  constructor(public navCtrl: NavController) {
  }

最后，我们可以在组件navigateToInfo内部声明函数HomePage。

  navigateToInfo() {
    this.navCtrl.push(InfoPage)
  }

我们所做的就是将对信息页面组件的引用推送到NavController.

更新信息页面 

完成上述操作后，导航到 info.html页面，并将新标题添加到 ion-content. 也许像 <h2>This is awesome...</h2>. 

现在，如果您运行应用程序并单击 主页上的Navigate to Info按钮，您将看到新创建的信息页面。还要注意后退按钮，它是由 Ionic 自动为您创建的。

恭喜！您已成功创建并导航到新页面。随意重复此过程并在此演示项目中创建其他页面。

结论

到目前为止，在本系列中，我们已经成功地创建了一个新的 Ionic 项目、创建新页面、编辑页面内容并设置了导航。我们现在已经介绍了一些核心概念，这些概念将在我们继续开发 Ionic 应用程序的过程中进一步帮助我们。