angular


1. 新建组件 ng n c hello

2. 插值语法 {{ content }}

3. 属性绑定用 []

<p-dataTable [value]="listdata" selectionMode="multiple"></p>
或者
<p-dataTable [value]="listdata" [selectionMode]="'multiple'"></p>

<div [class]="'box'"></div>  // 必须是字符串    [class]="box"这样写box是变量

<h3 [class.xxy-table]="true"></h3>       //

<h3 [class]="{'xxyTable': true}"></h3>   //对象条件渲染
ngClass 是指令 和直接写class一样 
<h3 [ngClass]="{'active': isActive}"></h3>    

<h3 [class]="['xxyTable', 'xxyBox']"></h3>   //数组渲染

<p [style]="{ width: '170px', height: '30px' }"></p>  //样式绑定
ngStyle

4. 条件判断 ngIf

<p *ngIf="isShow"></p>

<ng-container *ngIf="isShow; else Show">
	<p></p>
</ng-container>
<ng-template #Show>
  <p></p>
</ng-template>

5. 循环语句

let elementDatas: string[] = ['小明'， ‘小红]
<div *ngFor="let data of elementDatas let i = index">
{{i}}                                                      //下标
{{data}}                                                   // 值   
</div>

6. 事件绑定

<button (click)="handleClick()"></button>

7. ViewChild 绑定获取dom元素 （类似vue2中的ref）

通过 ViewChild 装饰器 获取 dom

import { ViewChild } from "@angular/core";

<div #text1></div>

@ViewChild("text1") text1: ElementRef;

this.text1.nativeElement

8 表单的双向数据绑定 （和vue的v-model类似）

首先全局引入app.module.js

import {FormsModule} from "@angular/forms";
imports: [ FormsModule ]

使用

<input maxlength="20" placeholder="名称" [(ngModel)]="prodectName"

export class ShopchecklistComponent implements OnInit {
  prodectName: string = ''
}

9.动态表单 （和第8点类似都是实现表单绑定）

首先全局引入app.module.js

import {ReactivFormsModule} from "@angular/forms";
imports: [ ReactivFormsModule ]

使用，要注册一个表单控件，就要导入 Formcontrol 类并创建一个 Formcontrol 的新实例，将其保存为类的属性。

<input type='text' [formControl]="productName" />
 使用必须 .value
<p>{{productName.value}}</p>

import { FormControl } from '@angular/forms'

export class ShopchecklistComponent implements OnInit {
  productName: FormControl = new FormControl('')
  
  //修改值
  updateName(val:string) {
    this.productName.setValue(val)
	}
}

10. 动态表单组（引入第9步的ReactivFormsModule）

使用 FormsGroup创建

<form [formGroup]="personMes" (submit)="OnSubmit()">
  <input type="text" formControlName="name"><br>
  <input type="text" formControlName="address"><br>
  <button>提交</button>
</form>

import { FormControl, FormGroup } from '@angular/forms';

export class ReativeFormsComponent implements OnInit {
  personMes: FormGroup = new FormGroup({
    name: new FormControl(),
    address: new FormControl()
  })

  OnSubmit(){
    console.log(this.personMes.value)
  }
}

11. 基础表单验证

（不常用）表单项使用required启用验证，#自定义名字="ngModel"，模版引用变量

<form>
  账号：<input type="text" required #nameInp="ngModel" [(ngModel)]="fromData.name">
    <p>验证信息{{nameInp.valid}}</p>    //返回布尔值
  密码：<input type="text" required #passInp="ngModel" [(ngModel)]="fromData.password">
    <p>验证信息{{passInp.valid}}</p>    //返回布尔值
  <button (click)="OnSubmit(nameInp)">提交</button>
</form>

export class ReativeFormsComponent implements OnInit {
  fromData={
    name: '',
    password: ''
  })

  OnSubmit(val){
    console.log(val)
  }
}

12. 自定义表单验证

引入 FormGroup, FormBuilder, Validators

<form [formGroup]="valiDataForm">
  <input type="text" formControlName="userName"><br>
    <p *ngIf="valiDataForm.get('userName')?.errors?.required">请输入6-18位名称</p>
		<p *ngIf="valiDataForm.get('userName')?.errors?.minlength">长度在6-18位</p>
  <input type="text" formControlName="password"><br>
  <input type="text" formControlName="phone"><br>
  <button  (click)="OnSubmit()">提交</button>
</form>



import { FormControl, FormGroup, FormBuilder, Validators } from '@angular/forms';

constructor(private fb: FormBuilder) {}   //注入方法

valiDataForm: FormGroup = this.fb.group({      //通过FormBuilder生成控件组
	userName: ['', [Validators.required, Validators.maxLength(18), Validators.minLength(6)]],
	password: ['', [this.passwordVal]],
	phone: ['', [Validators.required, this.phoneVal]],
})
//自定义校验方法
passwordVal() {}
//自定义校验方法
phoneVal(phone: FormControl)：object {
  const value = phone.value || ''
  if(!value) return { desc: '请输入手机号'}
  const valid = /[0-9]{11}/.test(value)
	return valid ? {} : {desc: '请输入正确的手机号'}
}


//提交时获取
OnSubmit() {
  console.log(this.valiDataForm.get('userName'))  //获取校验信息
}

13. 管道 (类似vue里的过滤器)

管道的作用就是传输，不同的管道具有不同的作用。

angular中自带的pipe函数

{{DateTime | date: 'yyyy-MM-dd HH:mm:ss'}}

export class EditTheDeclarationComponent implements OnInit {
    DateTime: Date = new Date() //获取本地当前时间
 }

常用的内置管道

14. 生命周期


15. 组件交互（类似vue3.0 setup语法糖写法）

https://blog.csdn.net/qq_37516758/article/details/129136190

• 父组件给子组件传值

父组件
1. 定义数据
export class ShopchecklistComponent implements OnInit {
	messageTitle: string = '某某页面头'
}
2.父组件在调用子组件的时候传值
<app-title [messageTitle]="messageTitle"></app-title>

子组件 app-title
1.需要引入Input
import { Input } from '@angular/core';
2.接收值
export class TitleComponent {
  @Input() messageTitle: string; 
}
3.使用
<p>{{messageTitle}}</p>

• 子组件给父组件传值

子组件 app-child
1.引入Output 和  EventEmitter
import { Output，EventEmitter } from '@angular/core';
2.定义方法 handleChange
@Output handleChange = new EventEmitter();
3.执行方法并传递数据
send() {
  this.handleChange.emit("给父组件传递的数据")
}

父组件
1.执行子组件emit出来的事件名字然后自定义事件
<app-child #child  (handleChange)="handleChange($event)"></app-child>
handleChange(e: string) {
  console.log(e, '获取子组件的值')
}

• 父组件获取子组件的数据（ViewChild）

父组件
<app-child #handleChild></app-child>

import { ViewChild } from "@angular/core";

@ViewChild("handleChild") handleChild : any;

假设有一个子组件方法为run()或者子组件数据为name
this.handleChild.run();
this.handleChild.name;

本栏目推荐文章
• rust angular 自签名证书 wss
• Angular | 项目配置（angular.json、envrionment、proxy、tailwind）（三）
• Angular 17+ 高级教程 – Component 组件 の ng-template
• 【Angular】在vscode中，某些库接口，如SimpleChanges，没有导入，鼠标移上去，ts语言功能没有快速修复选项，如何能够恢复快速修复功能？
• Angular | Ngmodule （二）
• Angular | standalone Component （一）
• Angular 17+ 高级教程 – Component 组件 の Query Elements
• 升级angular项目版本
• 【Angular】Angular中按顺序执行路由守卫的一种新方式
• Angular 应用里异步打开对话框的技术实现