IONIC--创建并使用组件

创建及使用组件

1、使用命令行创建组件，创建完成后会在src目录下多一个components的目录，目录中有用命令创建的所有组件

 cd myApp  //进入项目目录
 ionic g component loginModel //创建一个名为loginmodel的组件

2、该目录下有components.module.ts,所有创建的组件也会在这里声明,引入的所有模块在所有组件中都有效

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

import { LoginModelComponent } from './login-model/login-model';

//引入BrowserModule 解决ngFor报错问题

import { BrowserModule } from '@angular/platform-browser';

@ NgModule({

     declarations: [ LoginModelComponent],

     imports: [ BrowserModule],

     exports: [ LoginModelComponent]

})

export class ComponentsModule {}

3、使用组件时，要先在app.module.ts中声明注册模块后才能在pages里的所有页面使用

--myApp\src\app\app.module.ts --注册

/**根模块--告诉ionic如何组装应用 */

//引入component模块

import{ ComponentsModule} from '../components/components.module';

/ /......中间部分代码省略（修改这两处即可）

imports: [ //引入的模块（依赖的模块）

BrowserModule,

ComponentsModule,

IonicModule. forRoot( MyApp)

],

--myApp\src\pages\about\about.html --使用

< ion-header >

< ion-navbar >

< ion-title >

About 标题

</ ion-title >

</ ion-navbar >

</ ion-header >

< ion-content padding >

内容区域

< login-model ></ login-model >

</ ion-content >

再刷新app页面即可

创建页面及实现页面跳转

1、使用命令行创建页面，创建完成后会在src目录下多一个components的目录，目录中有用命令创建的所有组件

 cd myApp  //进入项目目录
 ionic g page news //创建一个名为news的页面

2、在home页面中做一个页面跳转,通过home页面的按钮跳转到news页面，首先要在app.module.ts中声明该页面

--myApp\src\app\app.module.ts --注册

//引入新闻页面

import { NewsPage } from '../pages/news/news';

/ /省略中间部分......

declarations: [ //声明组件

MyApp,

AboutPage,

ContactPage,

HomePage,

NewsPage, //声明

TabsPage

],

entryComponents: [ //配置不会在模板中使用的组件

MyApp,

AboutPage,

ContactPage,

HomePage,

NewsPage,

TabsPage

],

3、在home页面新增一个按钮，要在home页面使用就要在home页面中引入该模块,

--myApp\src\pages\home\home.html

< ion-header >

< ion-navbar >

< ion-title >Home </ ion-title >

</ ion-navbar >

</ ion-header >

< ion-content padding >

< login-model ></ login-model >

< h2 >Welcome to Ionic! </ h2 >

< p >

This starter project comes with simple tabs-based layout for apps

that are going to primarily use a Tabbed UI.

</ p >

< p >

Take a look at the < code >src/pages/ </ code > directory to add or change tabs,

update any existing page or create new pages.

</ p >

< button ion-button ( click)= "goNews()" >跳转至新闻 </ button >

</ ion-content >

--myApp\src\pages\home\home.ts

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

import { NavController } from 'ionic-angular';

import { NewsPage } from '../news/news';

@ Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

constructor( public navCtrl: NavController) {

}

goNews(){

//this.navCtrl.push(页面)

this. navCtrl. push( NewsPage);

}

}

4、启动后点击按钮就可以跳转至news.html了

备注：https://ionicframework.com/docs/components/#overview 可查看控件html代码