电影筛选页面跳转到详细页

src/app/app-routing.module.ts

@@ -1,29 +1,30 @@
-import { NgModule } from '@angular/core';
-import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
-
-const routes: Routes = [
-  {
-    path: '',
-    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
-  },
-  {
-    path: 'setting',
-    loadChildren: () => import('./setting/setting.module').then(m => m.SettingPageModule)
-  },{
-    path: 'smovies',
-    loadChildren: () => import('./tab2/smovies/smovies.module').then( m => m.SMoviesPageModule)
-  },
-  {
-    path: 'search',
-    loadChildren: () => import('./search/search.module').then( m => m.SearchPageModule)
-  },{
-    path: 'user',
-    loadChildren: () => import('../modules/user/user.module').then(m => m.UserModule)
-  },
-  {
-    path: 'mail',
-    loadChildren: () => import('./mail/mail.module').then( m => m.MailPageModule)
-  },
  {
+import { NgModule } from '@angular/core';
+import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [
+  {
+    path: '',
+    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
+  },
+  {
+    path: 'setting',
+    loadChildren: () => import('./setting/setting.module').then(m => m.SettingPageModule)
+  },{
+    path: 'smovies',
+    loadChildren: () => import('./tab2/smovies/smovies.module').then( m => m.SMoviesPageModule)
+  },
+  {
+    path: 'search',
+    loadChildren: () => import('./search/search.module').then( m => m.SearchPageModule)
+  },{
+    path: 'user',
+    loadChildren: () => import('../modules/user/user.module').then(m => m.UserModule)
+  },
+  {
+    path: 'mail',
+    loadChildren: () => import('./mail/mail.module').then( m => m.MailPageModule)
+  },
+  {
     path: 'moreplace',
     loadChildren: () => import('./moreplace/moreplace.module').then( m => m.MoreplacePageModule)
   },
@@ -31,13 +32,17 @@ const routes: Routes = [
     path: 'morecity',
     loadChildren: () => import('./morecity/morecity.module').then( m => m.MorecityPageModule)
   },
+  {
+    path: 'movie/:id',
+    loadChildren: () => import('./movie-detail/movie-detail.module').then( m => m.MovieDetailPageModule)
+  },
+
 
-
-];
-@NgModule({
-  imports: [
-    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
-  ],
-  exports: [RouterModule]
-})
-export class AppRoutingModule {}
+];
+@NgModule({
+  imports: [
+    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
+  ],
+  exports: [RouterModule]
+})
+export class AppRoutingModule {}

src/app/movie-detail/movie-detail-routing.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { MovieDetailPage } from './movie-detail.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: MovieDetailPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class MovieDetailPageRoutingModule {}
+  

src/app/movie-detail/movie-detail.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { MovieDetailPageRoutingModule } from './movie-detail-routing.module';
+
+import { MovieDetailPage } from './movie-detail.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    MovieDetailPageRoutingModule
+  ],
+  declarations: [MovieDetailPage]
+})
+export class MovieDetailPageModule {}

src/app/movie-detail/movie-detail.page.html

@@ -0,0 +1,22 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/previous-page"></ion-back-button>
+    </ion-buttons>
+    <ion-title>{{movie?.get("name")}}</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <ion-card-header>
+    <ion-card-title>{{ movie?.get('name') }}</ion-card-title>
+  </ion-card-header>
+  <ion-card-content>
+    <p>类型：{{ movie?.get('type') }}</p>
+    <p>日期：{{ movie?.get('releaseDate')}}</p>
+    <p>时长：{{ movie?.get('duration') }}</p>
+    <p>语言：{{ movie?.get('language') }}</p>
+    <p>介绍：{{ movie?.get('introduction') }}</p>
+    <p>评分：{{ movie?.get('rating') }}</p>
+  </ion-card-content> 
+</ion-content>

src/app/movie-detail/movie-detail.page.spec.ts

@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MovieDetailPage } from './movie-detail.page';
+
+describe('MovieDetailPage', () => {
+  let component: MovieDetailPage;
+  let fixture: ComponentFixture<MovieDetailPage>;
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MovieDetailPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/movie-detail/movie-detail.page.ts

@@ -0,0 +1,28 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import Parse from "parse";
+
+@Component({
+  selector: 'app-movie-detail',
+  templateUrl: './movie-detail.page.html',
+  styleUrls: ['./movie-detail.page.scss'],
+})
+export class MovieDetailPage implements OnInit {
+
+  constructor(private route:ActivatedRoute) { }
+
+  ngOnInit() {
+    this.loadMovieById()
+  }
+
+  movie:Parse.Object|undefined
+  async loadMovieById(){
+    let id = this.route.snapshot.params["id"]
+
+    if(id){
+      let query = new Parse.Query("YJMovies");
+      this.movie = await query.get(id);
+    }
+  }
+
+}

src/app/tab2/smovies/smovies.page.html

@@ -60,6 +60,7 @@
   </ion-card>
 
     <ion-list>
+      
       <ion-card *ngFor="let movie of filteredMovies">
         <ion-card-header>
           <ion-card-title>{{ movie.get('name') }}</ion-card-title>
@@ -72,7 +73,8 @@
           <p>介绍：{{ movie.get('introduction') }}</p>
           <p>评分：{{ movie.get('rating') }}</p>
         </ion-card-content>
-       
+        <ion-button fill="clear" routerLink="/movie/{{movie.id}}">detail</ion-button>
       </ion-card>
+      
     </ion-list>
 </ion-content>