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.ts

import { 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裏