ionicCLI Angular页面跳转

最新推荐文章于 2022-03-16 14:11:14 发布

原创最新推荐文章于 2022-03-16 14:11:14 发布 · 953 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angular

Angular 2 专栏收录该内容

14 篇文章

订阅专栏

本文介绍如何在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 {}