为了梳理自己学过的知识 我会从创建项目开始 如果熟悉的 可以直接跳到 五 查看功能实现
一、目标
每一个版本都对应一个版本号,当选择其中任意一个时,另外一个都会发生变化.
二、搭建 Angular开发环境
前提
已经安装好 node.js 和npm,未安装好 请百度 这里不再赘述
1.下载并安装脚手架工具
① 管理员身份打开cmd
② 运行npm install -g @angular/cli
2.运行脚手架工具创建空白项目
① 进入到你想要创建项目的位置
②运行 ng new myngapp01
③选择 你要使用的样式语言
这个地方按一下回车
创建完成
3.运行项目
①这里我是将项目添加到了 VScode编辑器里面
② 运行 ng-serve
③ 进行查看 http://localhost:4200/ 如下即为创建成功
三、简单介绍(如有不对,请各位大佬指出)
angular.json:是ng项目的配置文件
1.main.ts是主入口
2.index是主页面
主页面中有这么个东西 我们看不懂 那就去从主入口中找
3.查看主入口
boostrap 是引导启动的意思
module 是模块的意思
这里是引导启动模块
它引导启动了AppModule模块 AppModule 从上面可以看出 是从app/app.module 中引入的
Component 是组件的意思
在这里他用引导启动了 AppComponent组件
selector就是css选择器,表示这个组件可以通过app-root来调用,index.html中有个<app-root>Loading...</app-root>标签,这个标签用来展示该组件的内容
templateUrl 组件的模板,定义了组件的布局和内容
tyleUrls 该模板引用那个css样式
在这里我们就看到了我们主页的内容了
这也就是Angualr项目中的模块化思维
了解了这些 我们就开始创建我们的组件
四、创建组件
1.组件结构
为了使项目方便查看 在创建组件前 我们一般都创建一个文件夹
为了方便识别我们一般在相同模块中的主键前面添加一个相同的名字
spec 未测试文件 有无皆可
2.组件内容
3.注册组件
在主模块中注册组件
五、实现功能
用到的网站 阿里云组件库 NG-ZORRO - 企业级 UI 设计语言和 Angular 组件库 使用前需要进行配置 这个页面 快速上手那里 照着做就好 这里不再赘述
用到的方法 typeScript filter 用法如下
1.HTML代码
<nz-select
[(ngModel)]="selectStringVersion" <!--双向数据绑定-->
(ngModelChange)="change(1)" <!--触发事件-->
nzPlaceHolder="Choose"
>
<nz-option *ngFor="let temp of versionList" [nzValue]="temp.stringVersion" [nzLabel]="temp.stringVersion"></nz-option>
</nz-select>
<br>
<nz-select
[(ngModel)]="selectStringVersion"
(ngModelChange)="change(2)"
nzPlaceHolder="Choose"
>
<nz-option *ngFor="let temp of versionList" [nzValue]="temp.intVersion" [nzLabel]="temp.intVersion"></nz-option>
</nz-select>
2.TS中代码
import { Component } from "@angular/core";
/**
* 用装饰器定义了一个组件以及组件的元数据,组件必须使用这个装饰器 Component
*/
@Component({
//css选择器
selector:'app-select',
//组件的模板
templateUrl:'./app-select.component.html',
//组件的样式 可以有多个
styleUrls:['./app-select.component.css']
})
export class AppSelectCompoent{
//测试数据 实际项目应该为数据库数据
versionList=[
{stringVersion:'v1.0',intVersion:1},
{stringVersion:'v2.0',intVersion:2},
{stringVersion:'v3.0',intVersion:3},
{stringVersion:'v4.0',intVersion:4},
]
//双向数据绑定变量
selectStringVersion
selectIntVersion
change(a){
if(a==1){this.selectIntVersion=this.versionList.filter
(item=>item.stringVersion==this.selectStringVersion)
[0].intVersion} //这里0是因为 它前面得到的是一个数组 我们调取第一个数组元素即可
if(a==2){
this.selectStringVersion=this.versionList.filter
(item=>item.intVersion==this.selectIntVersion)
[0].stringVersion
}
console.log(this.selectIntVersion,this.selectStringVersion)
}
}
3.完成
六、表单中实现
虽然上面实现了我们的功能,但在项目中这些选择框有时候在表单中 那在表单中如何实现 基本上也差不多
1.创建表单
①引入需要的模块
import { FormsModule } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';
imports: [
FormsModule,
ReactiveFormsModule,
],
②设置表单
appForm:FormGroup //表单声明
//这里,每个控件名对应的值都是一个数组,这个数组中的第一项是其初始值。你可以只使用初始值来定义控
//件,但是如果你的控件还需要同步或异步验证器,那就在这个数组中的第二项和第三项提供同步和异步验证器。
constructor(private fb:FormBuilder){
this.appForm=this.fb.group({
intVersion:[null],
stringVersion:[null],
})
}
appModel = {
isVisible: false, //是否显示
title: '', //标题
saveLoading: false,
}
③HTML
<nz-modal
[(nzVisible)]="appModel.isVisible"
[nzTitle]="appModel.title"
(nzOnCancel)="appModel.isVisible = !appModel.isVisible"
[nzOkLoading]="appModel.saveLoading"
[nzOkDisabled]="!appForm.valid"
nzMaskClosable="false"
nzWidth="1000"
[nzContent]="Content">>
</nz-modal>
<button (click)="open('修改')">打开表单</button>
<ng-template #Content>
<form nz-form [formGroup]="appForm">
<nz-select
[(ngModel)]="selectStringVersion"
(ngModelChange)="change(1)"
nzPlaceHolder="Choose"
formControlName='currentStringVersion' //绑定
>
<nz-option *ngFor="let temp of versionList" [nzValue]="temp.stringVersion" [nzLabel]="temp.stringVersion"></nz-option>
</nz-select>
<br>
<nz-select
[(ngModel)]="selectIntVersion"
(ngModelChange)="change(2)"
nzPlaceHolder="Choose"
formControlName="currentIntVersion" //绑定
>
<nz-option *ngFor="let temp of versionList" [nzValue]="temp.intVersion" [nzLabel]="temp.intVersion"></nz-option>
</nz-select>
</form>
</ng-template>
④TS中修改
当我们把这里改成 表单绑定的值的时候 会出现一些状况
change(a) {
if (a == 1) {
this.appForm.value.currentIntVersion= this.versionList.filter(item => item.stringVersion == this.selectStringVersion)[0].intVersion
}
if (a == 2) {
this.appForm.value.currentStringVersion = this.versionList.filter(item => item.intVersion == this.selectIntVersion)[0].stringVersion
}
console.log( this.appForm.value.currentIntVersion ,this.appForm.value.currentStringVersion)
}
表单中的值发生了变化 但是选择框不变 所以 将上述值 改回 即可实现 实时刷新
⑤最终
change(a) {
if (a == 1) {
this.selectIntVersion = this.versionList.filter(item => item.stringVersion == this.selectStringVersion)[0].intVersion
}
if (a == 2) {
this.selectStringVersion = this.versionList.filter(item => item.intVersion == this.selectIntVersion)[0].stringVersion
}
console.log(this.selectIntVersion, this.selectStringVersion)
}