angular知识点总结

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

1.路由传参

// 1.查询参数中传递数据
<a [routerLink]="['/second-component']" [queryParams]="{name:ferret}" >ferret</a>
// js
// this.router.navigate(['/devicepay/'],{queryParams:{id:key},fragment: 'anchor'})
// 2.路由路径（url）中传递参数
// 路由 为 {path: 'second-component/:id',component:Tab4Component,children: [] },
<a [routerLink]="['/second-component','second']" [queryParams]="{name:ferret}" >ferret</a>
// 3.路由配置中设置静态数据 
// 路由 为 {path: 'second-component/:id',component:Tab4Component,children: [],data:{Data:'路由配置静态数据'} },
<a [routerLink]="['/second-component','second']" [queryParams]="{name:ferret}" >ferret</a>

2.防止未经授权的访问(路由守卫)

为你的守卫创建一项服务：ng generate guard your-guard .

    {
        path: 'register', 
        component: RegisterComponent, 
        canActivate:[RegisterGuardGuard]
    }

3.指令

（1） 内置属性型指令

   NgClass —— 添加和删除一组 CSS 类
   NgStyle —— 添加和删除一组 HTML 样式。 
   NgModel —— 将数据双向绑定添加到 HTML 表单元素。

(2).内置结构性指令

ngIf —— 从模板中创建或销毁子视图。
ngFor —— 为列表中的每个条目重复渲染一个节点。
ngSwitch —— 一组在备用视图之间切换的指令。

(3).建立属性型指令

import {Directive, ElementRef, HostListener, Input} from '@angular/core';
@Directive({
 selector: '[appHighDirective]'
})
export class HighDirectiveDirective {
 @Input('appHighlight') highlightColor!: string;
 @Input() defaultColor: string = 'red';
 //构造函数中使用 ElementRef 来注入宿主 DOM 元素的引用
 constructor(private el: ElementRef) {
}
 //监听宿主元素mouseenter事件
 @HostListener('mouseenter') onMouseEnter() {
   this.highlight(this.highlightColor || this.defaultColor);
}
 //监听宿主元素mouseleave事件
 @HostListener('mouseleave') onMouseLeave() {
   this.highlight('');
}
 private highlight(color: string) {
   //ElementRef通过其 nativeElement 属性,提供直接访问宿主 DOM 元素的能力。
   this.el.nativeElement.style.backgroundColor = color;
}
}

4.编写拦截器

import { Injectable } from '@angular/core';
import {
  HttpEvent, HttpInterceptor, HttpHandler, HttpRequest
} from '@angular/common/http';
import { Observable } from 'rxjs';
/** Pass untouched request through to the next request handler. */
@Injectable()
export class NoopInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler):
    Observable<HttpEvent<any>> {
    return next.handle(req);
  }
}

5. 处理拦截器事件

// 拦截请求
const token: string = window.localStorage.getItem('token');
if (token) {
  // 设置请求头
  req = req.clone({
    setHeaders: {
      'Authorization': `Bearer ${token}`,
      'Content-Type': 'application/json'
    }
  });
}
// 拦截响应
return next.handle(req).pipe(
            tap(event=>{
                if(event instanceof HttpResponse) {
                    // 成功
                    console.log('success')
                }
            },error=>{
                // 失败
                console.log(error)
            }),
            finalize(()=>{
                // 请求完成
                console.log('complete')
            })
        )

6.记录请求与响应对

import { finalize, tap } from 'rxjs/operators';
import { MessageService } from '../message.service';
@Injectable()
export class LoggingInterceptor implements HttpInterceptor {
  constructor(private messenger: MessageService) {}
  intercept(req: HttpRequest<any>, next: HttpHandler) {
    const started = Date.now();
    let ok: string;
    // 使用日志扩展服务器响应可观察性
    return next.handle(req)
      .pipe(
        tap(
          // 成功，当有回应;忽略其他事件
          event => ok = event instanceof HttpResponse ? 'succeeded' : '',
          // 操作失败;error是一个HttpErrorResponse
          error => ok = 'failed'
        ),
        // 记录可观察到的响应完成或发生错误
        finalize(() => {
          const elapsed = Date.now() - started;
          const msg = `${req.method} "${req.urlWithParams}"
             ${ok} in ${elapsed} ms.`;
          this.messenger.add(msg);
        })
      );
  }
}