angular常用

1、提交表单的时候，触发表单验证

a、触发整个表单验证：this.form.markAllAsTouched();

b、触发指定单个表单元素验证：this.form.controls.name.makeAsTouched();

2、angular11路由跳转：

a页面跳入b页面，在b页面获取元素距离顶部的距离，会发现值在a页面转入b页面之前就会调用

解决方法：在b页面设置settimeout延时去获取

3、获取网页地址参数

this.route.snapshot.queryParamMap.get('token')   route: ActivatedRoute this.router.navigateByUrl('/refresh', {skipLocationChange: true}).then(()=>this.router.navigate(['/admin/category-save'], { queryParams: { 'pk': id } }));   4、Angular在组件中引入本地图片 ps：不需要写前面的../ 直接写assets   5、惰性加载，angular默认的加载方式是急性加载 例如：在app-routing.module.ts中写入： export const routes: Routes = [ 　　{ path: 'welcome', loadChildren: () => import('./pages/frontend/sign-in-copy/sign-in.module').then(mod => mod.SignInModule), data: { breadcrumb: 'Sign In ' } }, ]   在sign-in .module.ts中写入： export const routes = [   { path: '', component: SignInComponent, pathMatch: 'full' } ];   6、Http拦截 Http拦截器就是拦截发出的请求，对其进行统一添加额外处理，然后放行；对响应进行拦截并作出业务上的判断，决定是否给与返回。 比如公共的api baseurl、header、是否需要携带token等   7、Json-server 在本地创建一个json文件，运行之后可以创建一个接口供测试使用 -[json-server] (https://github.com/typicode/json-server)  -1、安装 ： 'npm i -g json-server'  -2、新建一个json文件 ： 'db.json'  -3、在新建的json文件的目录下运行 json-server : 'json-server db.json'   ps:rest 常用的api：GET/POST/DELETE/PATCH   8、Angular httpClient获取请求头信息 const headers = new HttpHeaders(environment.otherRequestHeaders); const httpOptions = {       headers: headers,       observe: "response" as 'body', // to display the full response       responseType: 'json' as 'json',   }; this.http.get(url,httpOptions).subscribe(res=>{ 　　console.log(res); });   9、Angular 路由 ①路由跳转： import { Router } from '@angular/router';  constructor(public router: Router){} this.router.navigateByUrl('/refresh', { skipLocationChange: true }).then(() => this.router.navigate(["/account/product-list"]));   ②路由参数： import { ActivatedRoute} from '@angular/router'; constructor( private activatedRoute: ActivatedRoute){}   this.activatedRoute     .paramMap     .subscribe(params => {});   10、路由高亮 About   css: .actived{background:red}   精确匹配： About   11、angular-material mat-select设置默认值：

select class="mat-select-custom" formControlName="affiliation" required >
           "">Please select
           "1">test
select> 

this.addAdminForm = this.formBuilder.group({
      'affiliation': ['', [Validators.required]]
    });