使用的版本

Angular CLI版本号为16.1.5，Angular版本号为16.1.6。

前言

我所做的事情在这里！

在業務中，我將進行人生中第一次的前端開發，並使用Angular作為開發工具。在完成了Angular的教程後，考慮到我對TypeScript的不熟悉，我決定藉此機會同時學習TypeScript，故意選擇在Angular上進行Survival TypeScript！下次再見。

创建项目

首先是创建项目。因为这是关于Survival TypeScript的内容。

创建一个名为Angular-survive的Angular项目。

进入创建的项目目录
cd ./angular-survive
创建喜欢按钮组件
ng g c likeButton

将在app.Module.ts中创建的LikeButtonComponent导入。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { LikeButtonComponent } from './like-button/like-button.component'
import { HttpClientModule } from "@angular/common/http";

@NgModule({
  declarations: [
    AppComponent,
    LikeButtonComponent,
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

使用app.module.html渲染likeButtonComponent。

<div>
    <app-like-button></app-like-button>
</div>

“likeButtonComponent的实现
在 like-button.component.ts 文件中定义 count 变量，并赋予初始值。”

编写并记录onClick方法的处理

import { Component,OnInit } from '@angular/core';
import { Models } from '../model/models';

@Component({
  selector: 'app-like-button',
  templateUrl: './like-button.component.html',
  styleUrls: ['./like-button.component.css']
})
export class LikeButtonComponent {

  count = 999;

  onClick(){
    this.count++;
  }
}

在 like-button.component.html 文件中显示 likeButton
将 count 变量的值输出在按钮上方

    <div class="mainbody">
        <span class="likeButton" (click)="onClick()"> ♡ {{ count }} </span>
    </div>

我会随意调整CSS。

 .likeButton {
    background-color: rgb(231,76,60);
    color: white;
    padding: 0.8rem;
    border-radius: 0.4rem;
    cursor: pointer;
}

.likeButton:hover{
    opacity: .7;
}

.likeButton:active{
    background-color: orangered;
}

.mainbody{
    margin-top: 100px;
    margin-left: 100px;
}

我们用number类型来定义变量count。

export class Models{

    count!: number;

}

下一次，我们将使用Angular来创建一个猫图生成器。

并且更多… duō…)

我还写了这样的一篇文章。