Router: indicates that the todolistpage is redirected

TFPower-app/src/app/tab1/tab1.page.html

@@ -9,11 +9,21 @@
         </ion-toolbar>
       </ion-header>
       <ion-content class="ion-padding">
-
-        <!-- todolist组件 -->
-        <app-todo-edit (todolistChange)="changeTodolist($event)"></app-todo-edit>
+        <ion-list [inset]="true">
+          <ion-item>
+            <ion-label><a (click)="gotoTodolistpage()">Full</a></ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-label>Pokémon Yellow</ion-label>
+          </ion-item>
+        </ion-list>
+        <!-- <ion-button>Go to TodolistPage </ion-button> -->
+
+
+        <!-- todolist组件位置测试 -->
+        <!-- <app-todo-edit (todolistChange)="changeTodolist($event)"></app-todo-edit> -->
         <!-- todolist -->
-        @if(todolist.length>0){
+        <!-- @if(todolist.length>0){
         <ion-card color="light">
           <ion-list [inset]="true">
             @for (todo of todolist; track todo) {
@@ -25,12 +35,15 @@
             }
           </ion-list>
         </ion-card>
-        }
+        } -->
+
       </ion-content>
     </ion-menu>
 
 
     <div class="ion-page" id="main-content">
+
+      <!-- 标题《渴望力量》 -->
       <ion-header>
         <ion-toolbar>
           <ion-buttons slot="start">
@@ -41,8 +54,7 @@
       </ion-header>
       <ion-content class="ion-padding">
 
-
-        <!-- todolist组件 -->
+        <!-- todolist组件测试 -->
         <!-- <app-todo-edit (todolistChange)="changeTodolist($event)"></app-todo-edit> -->
         <!-- todolist -->
         <!-- @if(todolist.length>0){
@@ -59,7 +71,6 @@
         </ion-card>
         } -->
 
-
         <!-- 第一张卡片 -->
         <ion-card>
           <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/card-media.png" />
@@ -105,7 +116,11 @@
 
         <ion-card color="dark" id="allChange">
           <ion-card-header>
+            @if(!sexChecked){
             <ion-card-title>戒色签到</ion-card-title>
+            }@else {
+            <ion-card-title>签到成功</ion-card-title>
+            }
             <ion-card-subtitle>戒色行动</ion-card-subtitle>
           </ion-card-header>
 
@@ -113,13 +128,11 @@
             <ion-grid>
               <ion-row>
                 <ion-col>
-                  <ion-card color="light" id="present-alert-success"
-                    onclick="document.querySelector('#allChange').setAttribute('color', 'success'); goodday++; duringday++">
+                  <ion-card color="light" id="present-alert-success" (click)="goodbody()">
                     <ion-card-header>
                       <ion-card-title>身强体壮</ion-card-title>
                       <!-- <ion-card-subtitle>走向光明</ion-card-subtitle> -->
                     </ion-card-header>
-
                     <ion-card-content>
                       连续戒色 {{duringday}} 天 <br />
                       累计戒色 {{goodday}} 天
@@ -128,8 +141,7 @@
                   <ion-alert trigger="present-alert-success" header="戒色成功" [buttons]="alertButtons"></ion-alert>
                 </ion-col>
                 <ion-col>
-                  <ion-card color="light" id="present-alert-fail"
-                    onclick="document.querySelector('#allChange').setAttribute('color', 'danger');    badday++; duringday=0">
+                  <ion-card color="light" id="present-alert-fail" (click)="badbody()">
                     <ion-card-header>
                       <ion-card-title>眼神涣散</ion-card-title>
                       <!-- <ion-card-subtitle>Card Subtitle</ion-card-subtitle> -->

TFPower-app/src/app/tab1/tab1.page.ts

@@ -23,9 +23,13 @@ import {
   IonCard,
   IonCheckbox,
   IonInput,
+  IonNavLink,
+  IonButton,
 } from '@ionic/angular/standalone';
 import { ExploreContainerComponent } from '../explore-container/explore-container.component';
 import { TodoEditComponent } from '../todo-edit/todo-edit.component';
+import { TodolistPageComponent } from '../todolist-page/todolist-page.component';
+import { Route, Router } from '@angular/router';
 
 @Component({
   selector: 'app-tab1',
@@ -41,6 +45,7 @@ import { TodoEditComponent } from '../todo-edit/todo-edit.component';
     IonApp,
     IonMenu,
     IonButtons,
+    IonButton,
     IonMenuButton,
     IonCard,
     IonCardHeader,
@@ -58,16 +63,39 @@ import { TodoEditComponent } from '../todo-edit/todo-edit.component';
     TodoEditComponent,
     IonCheckbox,
     IonInput,
+    IonNavLink,
   ],
 })
 export class Tab1Page {
-  constructor() {}
+  constructor(private router: Router) {}
   alertButtons = ['打卡'];
   duringday: number = 10;
   goodday: number = 20;
   badday: number = 5;
   todolist: Array<string> = ['have a good day'];
+  sexChecked: boolean = false;
 
+  gotoTodolistpage() {
+    this.router.navigate(['/tabs/todolistpage']);
+  }
+  goodbody() {
+    let allChange = document.querySelector('#allChange');
+    if (allChange) {
+      allChange.setAttribute('color', 'success');
+    }
+    this.goodday++;
+    this.duringday++;
+    this.sexChecked = true;
+  }
+  badbody() {
+    let allChange = document.querySelector('#allChange');
+    if (allChange) {
+      allChange.setAttribute('color', 'danger');
+    }
+    this.badday++;
+    this.duringday = 0;
+    this.sexChecked = true;
+  }
   changeTodolist(ev: any) {
     this.todolist = ev;
   }

TFPower-app/src/app/tabs/tabs.routes.ts

@@ -26,6 +26,13 @@ export const routes: Routes = [
         loadComponent: () =>
           import('../tab4/tab4.page').then((m) => m.Tab4Page),
       },
+      {
+        path: 'todolistpage',
+        loadComponent: () =>
+          import('../todolist-page/todolist-page.component').then(
+            (m) => m.TodolistPageComponent
+          ),
+      },
       {
         path: '',
         redirectTo: '/tabs/tab1',

TFPower-app/src/app/todolist-page/todolist-page.component.html

@@ -0,0 +1,25 @@
+<ion-content [fullscreen]="true">
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>TodoList</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <!-- todolist组件-->
+  <app-todo-edit (todolistChange)="changeTodolist($event)"></app-todo-edit>
+  <!-- todolist -->
+  @if(todolist.length>0){
+  <ion-card color="light">
+    <ion-list [inset]="true">
+      @for (todo of todolist; track todo) {
+      <ion-item>
+        <ion-checkbox slot="start" aria-label="Toggle task completion"></ion-checkbox>
+        <ion-input aria-label="Task name" value="{{todo}}" disabled></ion-input>
+        <span (click)="deleteThisTodolist(todo)" class="text-red">X</span>
+      </ion-item>
+      }
+    </ion-list>
+  </ion-card>
+  }
+
+</ion-content>

TFPower-app/src/app/todolist-page/todolist-page.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { TodolistPageComponent } from './todolist-page.component';
+
+describe('TodolistPageComponent', () => {
+  let component: TodolistPageComponent;
+  let fixture: ComponentFixture<TodolistPageComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [TodolistPageComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TodolistPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

TFPower-app/src/app/todolist-page/todolist-page.component.ts

@@ -0,0 +1,47 @@
+import { Component, OnInit } from '@angular/core';
+import { TodoEditComponent } from '../todo-edit/todo-edit.component';
+import {
+  IonButtons,
+  IonCard,
+  IonCheckbox,
+  IonContent,
+  IonHeader,
+  IonInput,
+  IonItem,
+  IonList,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-todolist-page',
+  templateUrl: './todolist-page.component.html',
+  styleUrls: ['./todolist-page.component.scss'],
+  standalone: true,
+  imports: [
+    TodoEditComponent,
+    IonCard,
+    IonList,
+    IonItem,
+    IonCheckbox,
+    IonInput,
+    IonContent,
+    IonHeader,
+    IonTitle,
+    IonToolbar,
+    IonButtons,
+  ],
+})
+export class TodolistPageComponent implements OnInit {
+  constructor() {}
+  ngOnInit() {}
+
+  todolist: Array<string> = ['have a good day'];
+  changeTodolist(ev: any) {
+    this.todolist = ev;
+  }
+  deleteThisTodolist(todo: string) {
+    let idx = this.todolist.findIndex((item) => item === todo);
+    this.todolist.splice(idx, 1);
+  }
+}