reUpdate

src/app/app-routing.module.ts

@@ -7,9 +7,10 @@ const routes: Routes = [
     loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
   },
   {
-    path: 'tz',
-    loadChildren: () => import('./tz/tz.module').then( m => m.TZPageModule)
+    path: 'detail',
+    loadChildren: () => import('./detail-page/detail-page.module').then( m => m.DetailPagePageModule)
   },
+
   
 ];
 @NgModule({

src/app/app.module.ts

@@ -9,7 +9,7 @@ import { AppComponent } from './app.component';
 
 @NgModule({
   declarations: [AppComponent],
-  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
+  imports: [BrowserModule, IonicModule.forRoot({"mode":"md"}), AppRoutingModule],
   providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
   bootstrap: [AppComponent],
 })

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

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

src/app/detail-page/detail-page.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 { DetailPagePageRoutingModule } from './detail-page-routing.module';
+
+import { DetailPagePage } from './detail-page.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    DetailPagePageRoutingModule
+  ],
+  declarations: [DetailPagePage]
+})
+export class DetailPagePageModule {}

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

@@ -0,0 +1,54 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-title>详情</ion-title>
+    <ion-buttons slot="start">  
+      <ion-button (click)="goBack()">  
+        <ion-icon slot="icon-only" name="arrow-back"></ion-icon>  
+      </ion-button>  
+    </ion-buttons>  
+  </ion-toolbar>  
+</ion-header>
+
+<ion-content>  
+  <ion-grid>  
+    <ion-row>  
+      <ion-col size="12">  
+        <h2>{{ shige?.get('title') }}</h2>  
+        <p>朝代: {{ shige?.get('dynasty') }}</p>  
+        <p>作者: {{ shige?.get('author') }}</p>  
+        <div class="poem-content" [innerHTML]="shige?.get('content')">  
+        </div>  
+      </ion-col>  
+    </ion-row>  
+  
+    <ion-row>  
+      <ion-col size="12" >  
+        <ion-card>  
+          <ion-card-header>  
+            <ion-card-title>简介</ion-card-title>  
+          </ion-card-header>  
+          <ion-card-content [innerHTML]="shige?.get('intro')">  
+          </ion-card-content>  
+        </ion-card>  
+  
+        <ion-card>  
+          <ion-card-header>  
+            <ion-card-title>译文</ion-card-title>  
+          </ion-card-header>  
+          <ion-card-content  [innerHTML]="shige?.get('yiwen')">  
+           
+          </ion-card-content>  
+        </ion-card>  
+  
+        <ion-card>  
+          <ion-card-header>  
+            <ion-card-title>赏析</ion-card-title>  
+          </ion-card-header>  
+          <ion-card-content [innerHTML]="shige?.get('review')">  
+            
+          </ion-card-content>  
+        </ion-card>  
+      </ion-col>  
+    </ion-row>  
+  </ion-grid>  
+</ion-content>

src/app/detail-page/detail-page.page.scss

@@ -0,0 +1,17 @@
+.poem-content {  
+    font-family: 'serif'; // 使用衬线字体以模拟古诗的韵味  
+    line-height: 1.5;  
+    text-align: justify; // 文本两端对齐  
+    margin-top: 20px;  
+    font-size: 18px;
+    white-space: pre-wrap;  //换行
+    
+  }  
+    
+  ion-card {  
+    margin-top: 20px;  
+  }  
+    
+  ion-card-content {  
+    font-size: 20px; // 调整内容字体大小以适应手机屏幕  
+  }

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

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

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

@@ -0,0 +1,54 @@
+import { Component, OnInit } from '@angular/core';
+import { NavController } from '@ionic/angular';
+import { Location } from '@angular/common';
+import { ActivatedRoute } from '@angular/router';
+import Parse from "parse";
+@Component({
+  selector: 'app-detail-page',
+  templateUrl: './detail-page.page.html',
+  styleUrls: ['./detail-page.page.scss'],
+})
+export class DetailPagePage implements OnInit {
+
+  
+  poem = {  
+    title: '静夜思',  
+    dynasty: '',  
+    author: '',  
+    content: `  
+     
+    `,  
+    intro: '',  
+    translation: '',  
+    appreciation: ''  
+  };  
+  constructor(private navCtrl: NavController,private location:Location,
+    private route:ActivatedRoute
+  ) { }
+
+  ngOnInit() {
+    this.loadShigeById()
+  }
+
+
+  shige:Parse.Object|undefined
+  async loadShigeById(){
+    let id = this.route.snapshot.params["id"]
+    console.log("loadShigeById")
+    // let id = location.pathname.split("/").pop();
+
+    if(id){
+      let query = new Parse.Query("Shige");
+      this.shige = await query.get(id);
+    }
+  }
+
+
+  goBack() {  
+    
+    this.location.back()
+  }
+
+  }
+
+

src/app/tz/tz-routing.module.ts → src/app/detail-tz/detail-tz-routing.module.ts

@@ -1,12 +1,12 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
-import { TZPage } from './tz.page';
+import { DetailTZPage } from './detail-tz.page';
 
 const routes: Routes = [
   {
     path: '',
-    component: TZPage
+    component: DetailTZPage
   }
 ];
 
@@ -14,4 +14,4 @@ const routes: Routes = [
   imports: [RouterModule.forChild(routes)],
   exports: [RouterModule],
 })
-export class TZPageRoutingModule {}
+export class DetailTZPageRoutingModule {}

src/app/tz/tz.module.ts → src/app/detail-tz/detail-tz.module.ts

@@ -4,17 +4,17 @@ import { FormsModule } from '@angular/forms';
 
 import { IonicModule } from '@ionic/angular';
 
-import { TZPageRoutingModule } from './tz-routing.module';
+import { DetailTZPageRoutingModule } from './detail-tz-routing.module';
 
-import { TZPage } from './tz.page';
+import { DetailTZPage } from './detail-tz.page';
 
 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
     IonicModule,
-    TZPageRoutingModule
+    DetailTZPageRoutingModule
   ],
-  declarations: [TZPage]
+  declarations: [DetailTZPage]
 })
-export class TZPageModule {}
+export class DetailTZPageModule {}

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

@@ -0,0 +1,56 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-title>detailTZ</ion-title>
+    <ion-buttons slot="start">  
+      <ion-button (click)="goBack()">  
+        <ion-icon slot="icon-only" name="arrow-back"></ion-icon>  
+      </ion-button>  
+    </ion-buttons>  
+  </ion-toolbar>  
+</ion-header>  
+
+<ion-content>  
+  <ion-grid>  
+    <ion-row>  
+      <ion-col size="12">  
+        <h2>{{ poem.title }}</h2>  
+        <p>朝代: {{ poem.dynasty }}</p>  
+        <p>作者: {{ poem.author }}</p>  
+        <p class="poem-content">  
+          {{ poem.content }}  
+        </p>  
+      </ion-col>  
+    </ion-row>  
+  
+    <ion-row>  
+      <ion-col size="12">  
+        <ion-card>  
+          <ion-card-header>  
+            <ion-card-title>简介</ion-card-title>  
+          </ion-card-header>  
+          <ion-card-content>  
+            {{ poem.intro }}  
+          </ion-card-content>  
+        </ion-card>  
+  
+        <ion-card>  
+          <ion-card-header>  
+            <ion-card-title>译文</ion-card-title>  
+          </ion-card-header>  
+          <ion-card-content>  
+            {{ poem.translation }}  
+          </ion-card-content>  
+        </ion-card>  
+  
+        <ion-card>  
+          <ion-card-header>  
+            <ion-card-title>赏析</ion-card-title>  
+          </ion-card-header>  
+          <ion-card-content>  
+            {{ poem.appreciation }}  
+          </ion-card-content>  
+        </ion-card>  
+      </ion-col>  
+    </ion-row>  
+  </ion-grid>  
+</ion-content>

src/app/detail-tz/detail-tz.page.scss

@@ -0,0 +1,17 @@
+.poem-content {  
+  font-family: 'serif'; // 使用衬线字体以模拟古诗的韵味  
+  line-height: 1.5;  
+  text-align: justify; // 文本两端对齐  
+  margin-top: 20px;  
+  font-size: 18px;
+  white-space: pre-wrap;  //换行
+  
+}  
+  
+ion-card {  
+  margin-top: 20px;  
+}  
+  
+ion-card-content {  
+  font-size: 20px; // 调整内容字体大小以适应手机屏幕  
+}

src/app/tz/tz.page.spec.ts → src/app/detail-tz/detail-tz.page.spec.ts

@@ -1,12 +1,12 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { TZPage } from './tz.page';
+import { DetailTZPage } from './detail-tz.page';
 
-describe('TZPage', () => {
-  let component: TZPage;
-  let fixture: ComponentFixture<TZPage>;
+describe('DetailTZPage', () => {
+  let component: DetailTZPage;
+  let fixture: ComponentFixture<DetailTZPage>;
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(TZPage);
+    fixture = TestBed.createComponent(DetailTZPage);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

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

@@ -0,0 +1,33 @@
+import { Component, OnInit } from '@angular/core';
+import { NavController } from '@ionic/angular';
+import { Location } from '@angular/common';
+@Component({
+  selector: 'app-detail-tz',
+  templateUrl: './detail-tz.page.html',
+  styleUrls: ['./detail-tz.page.scss'],
+})
+export class DetailTZPage implements OnInit {
+
+  poem = {  
+    title: '',  
+    dynasty: '',  
+    author: '',  
+    content: `  
+      床前明月光，  
+      疑是地上霜。  
+      举头望明月，  
+      低头思故乡。  
+    `,  
+    intro: '这首诗描绘了诗人在寂静的夜晚，看到床前的明亮月光，误以为是地上的霜。他抬头望向明月，不禁低头思念起远方的故乡。',  
+    translation: 'The bright moonlight in front of the bed, I suspected it was frost on the ground. I raised my head and looked at the bright moon, then lowered my head and thought of my hometown.',  
+    appreciation: '此诗以清新朴素的笔触，抒写了丰富深曲的内容，境是境，情是情，那么逼真，那么动人，百读不厌，耐人寻绎。无怪乎有人赞它是“妙绝古今”。'  
+  };  
+  location: any;
+  constructor(private navCtrl: NavController) { }
+
+  ngOnInit() {
+  }
+  goBack() {  
+    this.location.back()   //点返回，跳转到上个界面
+  }
+}

src/app/listenbook/listenbook.page.html

@@ -1,13 +1,56 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
     <ion-title>听诗</ion-title>
-  </ion-toolbar>
+    <ion-buttons slot="start">  
+      <ion-button (click)="goBack()">  
+        <ion-icon slot="icon-only" name="arrow-back"></ion-icon>  
+      </ion-button>  
+    </ion-buttons>  
+  </ion-toolbar>  
 </ion-header>
 
-<ion-content [fullscreen]="true">
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">听诗</ion-title>
-    </ion-toolbar>
-  </ion-header>
+<ion-content>  
+  <ion-grid>  
+    <ion-row>  
+      <ion-col size="12">  
+        <h2>{{ poem.title }}</h2>  
+        <p>朝代: {{ poem.dynasty }}</p>  
+        <p>作者: {{ poem.author }}</p>  
+        <p class="poem-content">  
+          {{ poem.content }} 
+        </p>  
+      </ion-col>  
+    </ion-row>  
+  
+    <ion-row>  
+      <ion-col size="12" >  
+        <ion-card>  
+          <ion-card-header>  
+            <ion-card-title>简介</ion-card-title>  
+          </ion-card-header>  
+          <ion-card-content>  
+            {{ poem.intro }}  
+          </ion-card-content>  
+        </ion-card>  
+  
+        <ion-card>  
+          <ion-card-header>  
+            <ion-card-title>译文</ion-card-title>  
+          </ion-card-header>  
+          <ion-card-content>  
+            {{ poem.translation }}  
+          </ion-card-content>  
+        </ion-card>  
+  
+        <ion-card>  
+          <ion-card-header>  
+            <ion-card-title>赏析</ion-card-title>  
+          </ion-card-header>  
+          <ion-card-content>  
+            {{ poem.appreciation }}  
+          </ion-card-content>  
+        </ion-card>  
+      </ion-col>  
+    </ion-row>  
+  </ion-grid>  
 </ion-content>

src/app/listenbook/listenbook.page.scss

@@ -0,0 +1,17 @@
+.poem-content {  
+    font-family: 'serif'; // 使用衬线字体以模拟古诗的韵味  
+    line-height: 1.5;  
+    text-align: justify; // 文本两端对齐  
+    margin-top: 20px;  
+    font-size: 18px;
+    white-space: pre-wrap;  //换行
+    
+  }  
+    
+  ion-card {  
+    margin-top: 20px;  
+  }  
+    
+  ion-card-content {  
+    font-size: 20px; // 调整内容字体大小以适应手机屏幕  
+  }

src/app/listenbook/listenbook.page.ts

@@ -1,4 +1,7 @@
 import { Component, OnInit } from '@angular/core';
+import { NavController } from '@ionic/angular';
+import { Location } from '@angular/common';
+
 
 @Component({
   selector: 'app-listenbook',
@@ -7,9 +10,26 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ListenbookPage implements OnInit {
 
-  constructor() { }
+  poem = {  
+    title: '静夜思',  
+    dynasty: '唐代',  
+    author: '李白',  
+    content: `  
+      床前明月光， 
+      疑是地上霜。 
+      举头望明月，
+      低头思故乡。  
+    `,  
+    intro: '这首诗描绘了诗人在寂静的夜晚，看到床前的明亮月光，误以为是地上的霜。他抬头望向明月，不禁低头思念起远方的故乡。',  
+    translation: 'The bright moonlight in front of the bed, I suspected it was frost on the ground. I raised my head and looked at the bright moon, then lowered my head and thought of my hometown.',  
+    appreciation: '此诗以清新朴素的笔触，抒写了丰富深曲的内容，境是境，情是情，那么逼真，那么动人，百读不厌，耐人寻绎。无怪乎有人赞它是“妙绝古今”。'  
+  };  
+  constructor(private navCtrl: NavController,private location:Location) { }
 
   ngOnInit() {
   }
-
+  goBack() {  
+    
+    this.location.back()
+  }
 }

src/app/tab1/tab1.page.html

@@ -1,4 +1,5 @@
 <ion-header class="ion-no-border">  
+  <!-- (ionBlur)="results=[]" -->
   <ion-toolbar>  
     <ion-title></ion-title>  
     <ion-buttons >  
@@ -16,9 +17,10 @@
         </ion-segment>  
       </ion-button>  
     </ion-buttons>  
-    <ion-searchbar (ionBlur)="results=[]" [debounce]="1000" (ionInput)="search($event)" class="custom-searchbar"></ion-searchbar> 
+    <!-- (ionBlur)="results=[]" -->
+    <ion-searchbar [debounce]="1000" (ionInput)="search($event)" class="custom-searchbar"></ion-searchbar> 
     <ion-list>
-      <ion-item *ngFor="let result of results"
+      <ion-item *ngFor="let result of results" (click)="goToDetailPage(result)"
       >
         <ion-label>{{ result?.get("title") }} {{result?.get("author")}}</ion-label>
       </ion-item>

src/app/tab1/tab1.page.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { NavController } from '@ionic/angular';
 import Parse from "parse";
 
 @Component({
@@ -47,7 +48,11 @@ export class Tab1Page {
 
  
 
-  constructor() {}
+  constructor(private navController: NavController) {}
+  goToDetailPage(item: Parse.Object) {
+    this.results = []
+    this.navController.navigateForward('/detail/' + item.id);
+  }
 
 }
 

src/app/tz/tz.page.html

@@ -1,47 +0,0 @@
-<ion-header [translucent]="true">
-  <ion-header>  
-    <ion-toolbar>  
-      <ion-title>静夜思</ion-title>  
-      <ion-buttons slot="end">  
-        <!-- 这里可以添加返回按钮或其他操作按钮 -->  
-        <ion-button (click)="goToHome()">返回</ion-button>  
-      </ion-buttons>  
-    </ion-toolbar>  
-  </ion-header>  
-    
-  <ion-content>  
-    <ion-grid>  
-      <ion-row>  
-        <ion-col size="12">  
-          <!-- 作者信息 -->  
-          <h2 class="author">李白</h2>  
-            
-          <!-- 诗词内容 -->  
-          <p class="poem-content">  
-            床前明月光，<br>  
-            疑是地上霜。<br>  
-            举头望明月，<br>  
-            低头思故乡。  
-          </p>  
-            
-          <!-- 注释或更多信息（如果有的话） -->  
-          <ion-card>  
-            <ion-card-header>  
-              <ion-card-title>注释</ion-card-title>  
-            </ion-card-header>  
-            <ion-card-content>  
-              <p>这首诗描绘了诗人在寂静的夜晚，看到床前的明亮月光，误以为是地上的霜。他抬头望向明月，不禁低头思念起远方的故乡。</p>  
-            </ion-card-content>  
-          </ion-card>  
-        </ion-col>  
-      </ion-row>  
-        
-      <!-- 如果需要图片或背景，可以在这里添加 -->  
-      <!-- 例如，使用ion-img来显示一张图片 -->  
-      <!-- <ion-row>  
-        <ion-col size="12">  
-          <ion-img src="path/to/your/image.jpg"></ion-img>  
-        </ion-col>  
-      </ion-row> -->  
-    </ion-grid>  
-  </ion-content>

src/app/tz/tz.page.scss

@@ -1,15 +0,0 @@
-.author {  
-    font-size: 1.5rem;  
-    font-weight: bold;  
-    margin-bottom: 20px;  
-  }  
-    
-  .poem-content {  
-    font-family: 'serif'; // 使用衬线字体来模拟古诗的韵味  
-    line-height: 1.5;  
-    text-align: justify; // 根据需要调整文本对齐方式  
-  }  
-    
-  ion-card {  
-    margin-top: 20px;  
-  }

src/app/tz/tz.page.ts

@@ -1,21 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { NavController } from '@ionic/angular';  
-@Component({
-  selector: 'app-tz',
-  templateUrl: './tz.page.html',
-  styleUrls: ['./tz.page.scss'],
-})
-export class TZPage implements OnInit {
-
-  constructor(private navCtrl: NavController) {}  
-  ngOnInit(): void {
-    throw new Error('Method not implemented.');
-  }
-  
-  goToHome() {  
-    // 假设我们有一个名为HomePage的页面，用于作为应用的“首页”  
-    this.navCtrl.navigateRoot('/home');  
-  }  
-  
-  // 其他方法...  
-}