feat: tsdatetype page

src/app/app-routing.module.ts

@@ -1,24 +1,28 @@
-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: 'user',
-    loadChildren: () => import('../modules/user/user.module').then(m => m.UserModule)
-  },
-  {
-    path: 'aigc',
-    loadChildren: () => import('../modules/aigc/aigc.module').then(m => m.AigcModule)
+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: 'user',
+    loadChildren: () => import('../modules/user/user.module').then(m => m.UserModule)
+  },
+  {
+    path: 'aigc',
+    loadChildren: () => import('../modules/aigc/aigc.module').then(m => m.AigcModule)
+  },
  {
+    path: 'tsdatatype',
+    loadChildren: () => import('./tsdatatype/tsdatatype.module').then( m => m.TsdatatypePageModule)
   }
-];
-@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/tab1/tab1.page.html

@@ -14,6 +14,7 @@
   </ion-header>
 
   <div *ngIf="safeHTML" [innerHTML]="safeHTML"></div>
+  <ion-button expand="block" routerLink="/tsdatatype">示例：TS数据类型与模板</ion-button>
   <ion-button expand="block" routerLink="/tabs/tab2">示例：通讯录列表</ion-button>
   <ion-button expand="block" (click)="openGit()">代码：study-ng-contact</ion-button>
   <ion-button expand="block" routerLink="/aigc/chat">示例：AI对话示例</ion-button>

src/app/tsdatatype/tsdatatype-routing.module.ts

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

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

src/app/tsdatatype/tsdatatype.page.html

@@ -0,0 +1,83 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-title>{{title}} - 点赞数{{likeCount}}</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <ion-header collapse="condense">
+    <ion-toolbar>
+      <ion-title size="large">tsdatatype</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <ion-item>
+    常见的数据类型：
+    {{dataTypeList}}
+  </ion-item>
+
+  <ion-item>
+    日期类型：
+    {{now}}
+    日期管道(DatePipe的使用)
+    {{now | date:"yyyy-MM-dd"}}
+  </ion-item>
+
+  <ion-item>
+    Object类型：
+    {{student}}
+    名称：{{student.name}}
+    年龄：{{student.age}}
+  </ion-item>
+
+  <ion-item>
+    Boolean类型的模板(*ngIf)
+    {{isCollection}}
+    <ion-icon *ngIf="isCollection" name="star"></ion-icon>
+    <ion-icon *ngIf="!isCollection" name="star-outline"></ion-icon>
+  </ion-item>
+
+  <ion-list>
+    接口描述的Object作为数组元素的显示
+    <ion-item>
+      直接显示:{{studentList}}
+    </ion-item>
+    <ion-item>
+      下标取元素显示:
+      {{studentList[0].name}}
+      {{studentList[1].idcard}}
+      未定义变量的预取值(需要用?.表明可能不存在的父级Object)
+      {{studentList[2]?.name}}
+    </ion-item>
+    <ion-item>
+      数组Object的循环显示(*ngFor)
+      <ion-card *ngFor="let student of studentList">
+        <ion-card-title>
+          {{student?.name}}
+        </ion-card-title>
+        <ion-card-subtitle>
+          {{student?.age}}
+        </ion-card-subtitle>
+      </ion-card>
+    </ion-item>
+  </ion-list>
+
+  <ion-list>
+    管道:https://angular.cn/guide/pipes
+    <ion-item>
+      日期格式化
+      DatePipe {{now | date:"HH:mm:SS"}}
+    </ion-item>
+    <ion-item>
+      大写转换
+      UpperCasePipe {{studentList[0]?.name | uppercase}}
+    </ion-item>
+    <ion-item>
+      JSON调试
+      JsonPipe {{studentList[0] | json}}
+    </ion-item>
+    <ion-item>
+      PercentPipe {{0.125 | percent}}
+    </ion-item>
+  </ion-list>
+</ion-content>

src/app/tsdatatype/tsdatatype.page.spec.ts

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

src/app/tsdatatype/tsdatatype.page.ts

@@ -0,0 +1,53 @@
+import { Component, OnInit } from '@angular/core';
+
+
+interface Student{
+  name:string
+  age:number
+  idcard?:string
+}
+
+@Component({
+  selector: 'app-tsdatatype',
+  templateUrl: './tsdatatype.page.html',
+  styleUrls: ['./tsdatatype.page.scss'],
+})
+export class TsdatatypePage implements OnInit {
+
+  title:string = "TS数据类型与NG模板指令"
+  likeCount:number = 99
+  isCollection:boolean = false
+  now:Date = new Date();
+  dataTypeList:Array<string> = ["string","number","boolean"]
+  dataTypeList2:string[] = []
+
+  // 接口：Student
+  student:Student = {
+    name:"XiaoMing",
+    age:18,
+    idcard:"322xxxxxxxxxxxxxx"
+  }
+  studentList:Array<Student> = []
+  
+
+  constructor() { 
+    // 接口数组：Array<Student>
+    let studentList:Array<Student> = []
+    // 必填属性
+    let xiaoming = {name:"XiaoMing",age:18,idcard:"322*0000",lev:3}
+    // 可选属性
+    let xiaoli = {name:"XiaoLi",age:17}
+    studentList.push(xiaoming)
+    studentList.push(xiaoli)
+    this.studentList = studentList
+    // 未定义变量的预先取值
+    setTimeout(() => {
+      this.studentList.push({name:"小王",age:19})
+    }, 2000);
+
+  }
+
+  ngOnInit() {
+  }
+
+}

src/modules/study/study.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule
+  ]
+})
+export class StudyModule { }