angular+ionoc 显示隐藏 page页面+组件+引用echart+路由跳转+打包+模块+组件传值+子组件传值给父组件触发事件+for循环有index+class改变+input+图片显示

ionic g page xxx       // 建立一个page页面
ionic g component xxx  // 创建一个组件

import { Router} from '@angular/router'; //导入router服务
constructor(private router: Router) { }  // 使用路由服务
this.router.navigateByUrl("tab3/shipment")  // 进行跳转
that.router.navigate(['login'], { queryParams: { state: 123} });  // 带参跳转

  echart

ng build --base-href ./    
ng build --prod

import { NgModule } from '@angular/core';
import { IonicModule } from '@ionic/angular';
import { CommonModule } from '@angular/common';
import { ContlistComponent } from './contlist.component';@NgModule({declarations: [ContlistComponent],imports: [ IonicModule,CommonModule,CommonModule ],exports: [ContlistComponent],providers: [],
})
export class ContlistModule {}//  创建一个xxx.module.tsimport { ContlistModule } from '../component/contlist/contlist.module';
@NgModule({imports: [ContlistModule,],declarations: [Tab1Page]
})
//   引入并且使用  

import { Component, OnInit , Input } from '@angular/core';@Input('dataList') dataList: any;
// 在子组件里引入Input    然后使用
<app-contlist class="listData" [dataList]="dataList" ></app-contlist>
// 父组件传值

  @Output() voted = new EventEmitter<string>();vote(val:string){this.voted.emit(val);}
//子组件  引入 Output 和 EventEmitter  再用事件进行触发<app-tabpage (voted)="onVoted($event)"> </app-tabpage>onVoted(agreed: string) {console.log(agreed);}
// 父组件进行获取  再在事件里进行获取

          <ion-segment-button  *ngFor="let data of pageData; let i=index"  :checked="i==0" (click)="vote(i)" >{
   {data.name}}</ion-segment-button>

[ngClass]="{'active': nowList=='Unread'}"    //  老版的是ng-class
[ngClass]="['iconfont', data.icon]"          //  for循环传值[ngStyle]="{'color':selecti === i ? '#3880FF' : '' }"   // style 进行改变

  ionViewWillEnter(){                   // 当进入此页面时let url = this.urlTop + "&Status=0";let that = this;this.getData(that, url);console.log("进入");}ionViewDidLeave(){                  // 离开页面事件this.searchData= null;this.dataList = null;this.data = null;this.OperationCount = null;                       // 操作订单数量this.HistoryCount = null;                         // 历史订单数量this.nowCheck = 'operation'                       // 操作中的订单和历史订单    history 历史订单   operation 操作订单this.moreDis = true;                              // 是否给他加载更多}

<ion-input placeholder="请输入手机号" [(ngModel)]="phoneNumber"></ion-input>
ionic 图片只能放在assets里