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代码

原文链接：https://blog.csdn.net/sinat_28597179/article/details/79094176