search

-- 第七课：重用组件

听说你喜欢app，那么我就在你的app里面放一个app好了。目前为止我们的应用有三个标签页了，我们现在要加个全新的标签页了。我们本书的第一个应用QuickList跟咱们应用很搭调呢。外出露营的时候Checklist非常方便的说。 我们这节课要做的是基上就是将Quick List功能“拖放”到当前应用中。在Ionic 2和Angular 2 的模块化的天性之下，这些事情可以很轻易的实现。如果你之前已经创建好了Quick List的话，你只要去其中拷贝代码即可，如果没有的话，那么去下载的包里拷贝代码。 没有像“拖放”那么容易，因为直接拖放的话会有一些冲突，但是还是很直白。我们先从文件拷贝开始。 > 拷贝 QuickList 的 models 文件夹到 CamperMate 的 src 文件夹中 > 拷贝 QuickLists 的 checklist 页文件夹到 CamperMate的 pages 文件夹 这两部非常简单，但是现在我们会遇上一点小问题。我们也想要从QuickLists中拷贝HomePage，但是我们的CamperMate已经有HomePage了，所以我们需要做一点点变通。 > 在CamperMate 的 pages 文件夹内创建一个新的文件夹名为 quicklistshome > 将 QuickLists 的 home文件夹里面的内容（home.ts,home.scss,home.html）拷贝到刚才新建的 quicklistshome 里面 > 将 home.ts,home.scss,home.html重命名为quicklistshome.ts,quicklistshome.scss, quicklistshome.html 现在得到的结果是我们从QuickLists中将他的整个home页都拷贝过来了，但是拷贝过来之后我们都重命名为quicklistshome，因为我们不想让他和已有的home页有冲突。如果对上面的内容感觉比较迷惑，那么请查看本书源代码的文件夹结构。 由于我们对文件名进行了变更，我们也需要对代码进行一些变动。我们需要将QuickLists Home Page的类名，同时我们也要修改模板的名字： > 对 src/pages/quicklistshome/quicklistshome.ts 进行如下变更：

import { Component } from '@angular/core';
import { NavController, AlertController, Platform } from 'ionic-angular';
import { ChecklistPage } from '../checklist/checklist';
import { ChecklistModel } from '../../models/checklist-model';
import { Keyboard } from 'ionic-native';
import { Data } from '../../providers/data';

@Component({
    selector: 'page-quicklistshome',
    templateUrl: 'quicklistshome.html'
})
export class QuickListsHomePage {
    checklists: ChecklistModel[] = [];
    local: Storage;

    constructor(public nav: NavController, public platform: Platform, public dataService: Data, public alertCtrl: AlertController) {
    }

    ionViewDidLoad(){
    this.platform.ready().then(() => {
        this.dataService.getData().then((checklists) => {
            let savedChecklists: any = false;

            if(checklists && typeof(checklists) != "undefined"){
                savedChecklists = JSON.parse(checklists);
            }

            if(savedChecklists){
                savedChecklists.forEach((savedChecklist) => {
                    let loadChecklist = new ChecklistModel(savedChecklist.title, savedChecklist.items);
                    this.checklists.push(loadChecklist);

                    loadChecklist.checklist.subscribe(update => {
                        this.save();
                    });
                });
            }
        });
        });
    }
}

注意类型和templateUrl都变了。有一个我们忽略了的事情是我们没有将Quicklists应用的Data服务拷贝过来。这个因为我们的CamperMate应用已经有一个了，所以我们只要对他进行改动就可以了。 > 给 src/providers/data.ts 添加下面两个函数：

这两个函数的命名方式和data.ts里面其他函数的命名方式不一样，保持这样的原因是避免对Quicklists功能做更多的修改。 样式方面没有多少要做的，但是我们的Quicklists应用的navbar都是用的secondary颜色，但是CamperMate用的是primary，所以我们需要对它进行改动。 > 修改 src/pages/checklist/checklist.html 的navbar为如下：

> 修改 src/pages/quicklistshome/quicklistshome.html 的navbar为如下：

> 修改 src/pages/quicklistshome/quicklistshome.scss 为如下：

这样一来，我们就在CamperMate应用里面完美移植了QuickLists功能了。我们现在只要加上对于的标签栏就可以了。 > 修改 src/pages/home/home.html以包含下面第四个标签栏

这样我们就可以去类定义中定义tab4Root了。 > 修改 src/pages/home/home.ts到如下：

新加的页面也需要去app.module.ts中进行导入。 > 修改src/app/app.module.ts 为如下：

现在加载应用的话，应该可以看到一个新的标签页： 标签页

如你所见，这样模组是项目结构使得重用其他应用中的代码非常简单，如果用同名组件的话就会更简单了。 我们的应用现在看起来已经很好了，但是下节课我们要加入一点样式让他更好看些。

Previous-- 第六课：保存和取回数据Next-- 第八课：自定义样式

Last updated