ionicCLI Angular頁面跳轉__angular

1、Component中的.html檔案中item添加點擊事件：

<a class="home-menu-item" *ngFor="let item of menuItems" (click)="gotoPage(item)">    <img class="" src="{{item.imgSrc}}">    <span>{{item.subTitle}}</span>  </a>

2、 Component對應的.ts檔案中向home頁面（Page）傳遞事件，傳遞參數：

// 聲明需要外傳的事件@Output()itemAction:EventEmitter<any> = new EventEmitter<any>();// 實現這個方法，方法觸發傳遞事件gotoPage(item:any){    this.itemAction.emit(item);  }

3、 home頁面（Page）的html檔案中，對應使用這個component的標籤中，接收傳遞過來的事件：

<!--接收傳遞過來的事件--><this-component (itemAction)="jumpAction($event)"></this-component>

4、home頁面（page）的.ts檔案中，接收傳遞過來的事件，實現自己的方法：

export class HomePage {  constructor(public navCtrl: NavController) {  }  // 實現對應的方法  jumpAction(menuItem:any) {    console.log(menuItem); // 這個東西就是component中傳遞的資料    this.navCtrl.push(menuItem.destinatePage);  }}

5、如果沒有把新的頁面import到app.module.ts檔案的話，可能會報錯，別忘記（但是後面注釋掉測試一下，又不報錯了）

...import {ComponentsModule} from "../components/components.module";    // <!-- 需要import對應的檔案 -->import {ServiceResourceListPageModule} from "../pages/home/service-resource-list/service-resource-list.module";...@NgModule({  declarations: [    MyApp,    AboutPage,    ContactPage,    HomePage,    TabsPage  ],  imports: [    BrowserModule,    // <!-- imports中添加上對應的頁面模組 -->    ServiceResourceListPageModule,    ComponentsModule,    IonicModule.forRoot(MyApp)  ],  bootstrap: [IonicApp],  entryComponents: [    MyApp,    AboutPage,    ContactPage,    HomePage,    TabsPage  ],  providers: [    StatusBar,    SplashScreen,    {provide: ErrorHandler, useClass: IonicErrorHandler}  ]})export class AppModule {}