angular 简结 ​

import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {

  constructor(private el: ElementRef) { }

  @Input('appHighlight') highlightColor: string;

  @HostListener('mouseenter') onMouseEnter() {
    this.highlight(this.highlightColor || 'red');
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.highlight(null);
  }

  private highlight(color: string) {
    this.el.nativeElement.style.backgroundColor = color;
  }

axios
        .get("/user?ID=12345")
        .then(function (response) {
          // handle success
          console.log(response);
        })
        .catch(function (error) {
          // handle error console.log(error);
        })
        .then(function () {
          // always executed
        });

const routes: Routes = [
  { path: "", redirectTo: "home", pathMatch: "full" }, //路径为空
  { path: "home", component: HomeComponent },
  {
    path: "product/:id",
    component: ProductComponent,
    children: [
      { path: "", component: ProductDescComponent },
      { path: "seller/:id", component: SellerInfoComponent },
    ],
  },
  { path: "**", component: Code404Component },
];

const routes: Routes = [
  {
    path: '**', component: ***,
    canActivate: [LoginGuard],//进入守卫
    canDeactivate: [UnsaveGuard]//离开守卫
  }
]
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [LoginGuard,UnsaveGuard]
})
export class AppRoutingModule { }

import { CanActivate } from "@angular/router";
export class LoginGuard implements CanActivate {
  canActivate() {
    let loggedIn: boolean = Math.random() < 0.5;
    if (!loggedIn) {
      console.log("用户未登录");
    }
    return loggedIn;
  }
}

import { Component, OnInit, Input } from "@angular/core";

@Component({
  selector: "app-child",
  templateUrl: "./child.component.html",
  styleUrls: ["./child.component.sass"],
})
export class ChildComponent implements OnInit {
  private _childTitle: string = "子组件标题";

  //用于供父组件读写
  @Input()
  set childTitle(childTitle: string) {
    this._childTitle = childTitle;
  }
  get childTitle(): string {
    return this._childTitle;
  }
  //向父组件发送事件
  @Output()
  initEmit = new EventEmitter<string>();

  constructor() {}

  ngOnInit() {
    this.initEmit.emit("子组件初始化成功");
  }

  childPrint() {
    alert("来自子组件的打印");
  }
}

import { Component, OnInit } from "@angular/core";

@Component({
  selector: "app-parent",
  templateUrl: "./parent-and-child.component.html",
  styleUrls: ["./parent-and-child.component.sass"],
})
export class ParentAndChildComponent implements OnInit {
  constructor() {}

  ngOnInit() {}

  accept(msg: string) {
    console.log(msg);
  }
}

import { Component, Injectable, EventEmitter } from "@angular/core";
@Injectable()
export class myService {
  public info: string = "";
  constructor() {}
}

<p>child1 work</p>
<button (click)="showInfo()"></button>
import { Component, OnInit} from '@angular/core';
import { myService } from '../../../service/myService..service';

@Component({
  selector: 'app-child',
  templateUrl: './child1.component.html',
  styleUrls: [[./child1.component.sass']
})
export class Child1Component implements OnInit {

  constructor(
          public service: myService
  ) { }

  ngOnInit() {

  }
  showInfo() {
    alert(this.service.info);
  }
}

<p>child2 works!</p>
<button (click)="changeInfo()"></button>
import { Component, OnInit} from '@angular/core';
import { myService } from '../../service/myService..service';

@Component({
  selector: 'app-child2',
  templateUrl: './child2.component.html',
  styleUrls: [[./child2.component.sass']
})
export class Child2Component implements OnInit {

  constructor(
          public service: myService
  ) { }

  ngOnInit() {

  }
  changeInfo() {
    this.service.info = this.service.info + "1234";
  }
}

this.router.navigate([[user', 1]);//使用snapshot.params
以根路由为起点跳转

this.router.navigate([[user', 1],{relativeTo: route});
默认值为根路由，设置后相对当前路由跳转，route是ActivatedRoute的实例，使用需要导入ActivatedRoute

this.router.navigate([[user', 1],{ queryParams: {id: '1',status: true});//使用snapshot.queryParams
路由中传参数 /user/1?id=1

        this.router.navigate([[user', 1],{ queryParams: {id: '1',status: true},skipLocationChange: true });
路由中传参数同上,但url不会变化

this.router.navigate([[user', 1],{ fragment: 'top' });
路由中锚点跳转 /user/1#top

import { CookieService } from "ngx-cookie-service";
providers: [CookieService];

import { CookieService } from 'ngx-cookie-service';
constructor( private cookieService: CookieService ) { }
ngOnInit() {
  this.cookieService.set( name, value, time );
  this.cookieService.get( name );
}

public isScollDown : boolean = false;
@HostListener('window:scroll', [[$event'])
public onScroll = (e) => {
  if(document.documentElement.scrollTop > 252){
    this.isScollDown = true;
  }
}

import {
  HttpErrorResponse,
  HttpEvent,
  HttpHandler,
  HttpInterceptor,
  HttpRequest,
  HttpResponse,
} from "@angular/common/http";
import { Observable, of, throwError } from "rxjs";
import { catchError } from "rxjs/internal/operators";
import { Router } from "@angular/router";
import { Injectable } from "@angular/core";

import { AuthService } from "./../app.service";
import { environment } from "src/environments/environment";

/** Pass untouched request through to the next request handler. */
@Injectable()
export class MyInterceptor implements HttpInterceptor {
  constructor(private router: Router, private authService: AppService) {}

  intercept(
          req: HttpRequest<any>,
          next: HttpHandler
  ): Observable<HttpEvent<any>> {
    // 获取本地存储的token值，
    const authToken = this.authService.getAuthorizationToken();
    // 若token存在，则对请求添加请求头
    // 并格式化处理url地址，简化service中接口地址的编辑
    if (authToken) {
      const authReq = req.clone({
        headers: req.headers.set("Authorization", "bearer" + authToken),
        url: environment.api_endpoint + req.url,
      });
      return (
              next
                      // 返回处理后的请求
                      .handle(authReq)
                      // 返回结果错误处理
                      .pipe(catchError((error) => this.auth.handleError(error)))
      );
    }
    // 若token不存在，则不对请求进行处理
    return next
            .handle(req)
            .pipe(catchError((err: HttpErrorResponse) => this.handleData(err)));
  }

  private handleData(
          res: HttpResponse<any> | HttpErrorResponse
  ): Observable<any> {
    // 业务处理：一些通用操作
    switch (res.status) {
      case 401:
        console.log("not login");
        this.router.navigate(["/"]);
        return of(res);
        break;
      default:
    }
    return throwError(res);
  }
}

providers: [
  {provide: HTTP_INTERCEPTORS, useClass: MyInterceptor, multi:true}
],

import axios from 'axios';//引入axios依赖

axios.defaults.timeout = 5000;
axios.defaults.baseURL ='';

// 定义加载动画
let loading = null
let loadingShow = false

//http request 封装请求头拦截器
axios.interceptors.request.use(
        config => {
          if (!loadingShow) {
            loadingShow = true
            loading = message.loading('数据加载中...', 0)
          }

          // 设置 token 判断是否存在token，如果存在的话，则每个http header都加上token
          if (sessionStorage.getItem('auth')) {
            conf.headers[[Authorize'] = sessionStorage.getItem('auth')

            return config;
          },
          error => {
            return Promise.reject(err);
          }
        );

//http response 封装后台返回拦截器
          axios.interceptors.response.use(
                  response => {
                    //当返回信息为未登录或者登录失效的时候重定向为登录页面
                    if(response.data.code == 'W_100004' || response.data.message == '用户未登录或登录超时，请登录！'){
                      // todo
                    }
                    return response;
                  },
                  error => {
                    return Promise.reject(error)
                  }
          )

// 移除拦截器
// var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
// axios.interceptors.request.eject(myInterceptor);

          /**
           * 封装get方法
           * @param url
           * @param data
           * @returns {Promise}
           */
          export function fetch(url,params={}){
            return new Promise((resolve,reject) => {
              axios.get(url,{
                params:params
              })
                      .then(response => {
                        resolve(response.data);
                      })
                      .catch(err => {
                        reject(err)
                      })
            })
          }
          /**
           * 封装post请求
           * @param url
           * @param data
           * @returns {Promise}
           */
          export function post(url,data = {}){
            return new Promise((resolve,reject) => {
              axios.post(url,data)
                      .then(response => {
                        resolve(response.data);
                      },err => {
                        reject(err)
                      })
            })
          }
          /**
           * 封装导出Excal文件请求
           * @param url
           * @param data
           * @returns {Promise}
           */
          export function exportExcel(url,data = {}){
            return new Promise((resolve,reject) => {
              axios({
                method: 'post',
                url: url, // 请求地址
                data: data, // 参数
                responseType: 'blob' // 表明返回服务器返回的数据类型
              })
                      .then(response => {
                        resolve(response.data);
                        let blob = new Blob([response.data], {type: "application/vnd.ms-excel"});
                        let fileName = "订单列表_"+Date.parse(new Date())+".xls" ;
                        if (window.navigator.msSaveOrOpenBlob) {
                          navigator.msSaveBlob(blob, fileName);
                        } else {
                          var link = document.createElement('a');
                          link.href = window.URL.createObjectURL(blob);
                          link.download = fileName;
                          link.click();
                          window.URL.revokeObjectURL(link.href);
                        }
                      },err => {
                        reject(err)
                      })
            })
          }
          /**
           * 封装patch请求
           * @param url
           * @param data
           * @returns {Promise}
           */
          export function patch(url,data = {}){
            return new Promise((resolve,reject) => {
              axios.patch(url,data)
                      .then(response => {
                        resolve(response.data);
                      },err => {
                        reject(err)
                      })
            })
          }
          /**
           * 封装put请求
           * @param url
           * @param data
           * @returns {Promise}
           */
          export function put(url,data = {}){
            return new Promise((resolve,reject) => {
              axios.put(url,data)
                      .then(response => {
                        resolve(response.data);
                      },err => {
                        reject(err)
                      })
            })
          }

import axios from '../../Plugins/axios';

getSomething() {
  axios.get(...)
}

import { Observable, fromEvent, from, of, interval, throwError } from "rxjs";
import {
  mapTo,
  map,
  scan,
  mergeMap,
  concatMap,
  bufferTime,
  take,
  reduce,
  filter,
  throttleTime,
  throttle,
  distinctUntilChanged,
  debounce,
  debounceTime,
} from "rxjs/operators";

ObservableObject.pipe(funcA,funcB,...).subscribe(...)

// 获取html元素
const btnElem = document.querySelector("button#rxjsBtn");
// 创建按钮的点击事件为可观察对象
fromEvent(btnElem, "click")
        .pipe(scan((count) => count + 1, 0)) // count为定义的变量；逗号后面的0为count的初始值；箭头后面的语句值为scan返回的值；
        .subscribe((count) => {
          console.log("fromEvent" + count);
        });
// 第一次点击输出: fromEvent1；第二次点击输出fromEvent2;依次同理

const arrayData = [5, 6];
from(arrayData)
        .pipe(
                scan((scanData, item) => (scanData += item), 10),
                map((item) => item * 2)
        )
        .subscribe((data: any) => {
          console.log("from:" + data); //from:30 from:42
        });

of("value1", "value2").subscribe((data: any) => {
  console.log("of：" + data); //of：value1 of: value2
});

const numbers = interval(1000);
numbers.subscribe((x) => console.log("interval:" + x));
// 浏览器输出: interval:1 interval2 依次增加

new Observable((obsever) => {
  obsever.next("add");
  obsever.next("upt");
  obsever.complete();
  obsever.next("del");
})
        .pipe(map((data) => data + "Map"))
        .subscribe((data: any) => {
          console.log(data);
        });
// 浏览器输出: addMap uptMap

from([1, 2]).pipe(.map((item) => item * 2))
.subscribe((data: any) => { console.log('map:' + data);});
// 浏览器输出: map: 2 map: 4

const mergeA = of(1, 2, 3);
const mergeB = mergeA.pipe(
        map((r) => of(r)),
        mergeMap((r) => r)
);
mergeB.subscribe((c) => console.log("mergeMap:" + c));
// 浏览器输出: mergeMap1 mergeMap2 mergeMap3

of(1, 2, 3)
        .pipe(mapTo(33))
        .subscribe((data) => {
          console.log(data);
        });
// 浏览器输出: 3个33

from([1, 2])
        .pipe(scan((acc, item) => (acc += item), 10)) // acc为一个新变量，item为[1,2]中的每一项， 10为新变量acc的默认初始值；返回新生成的中间值acc reduce同理
        .subscribe((v) => console.log(v));
//  浏览器输出 11  13

from([1, 2])
        .pipe(reduce((acc, item) => (acc += item), 10))
        .subscribe((v) => console.log(v));
// 输出13

from([2, 3, 4])
        .pipe(filter((item) => item <= 3))
        .subscribe((v) => console.log(v));
// 浏览器输出: 2 3

@ViewChild('child') child;

ngAfterViewInit() {
  this.do()
}

do() {
  // 一秒内只触发一次点击事件
  fromEvent(this.child.nativeElement, 'click').pipe(
        throttleTime(1000),
        scan(count => count + 1, 0))
        .subscribe(data => {
          console.log('点击了' + data + '次');
        });
}

of(1, 1, 2, 2, 2, 1, 1, 2, 3, 3, 4)
        .pipe(distinctUntilChanged())
        .subscribe((val) => {
          console.log(val);
        });
//1 2 1 2 3 4

const source = interval(1000);
// 节流2秒后才发出最新值
const example = source.pipe(throttle((val) => interval(2000)));
// 输出: 0...3...6...9
const subscribe = example.subscribe((val) => console.log(val));

// 每1秒发出值, 示例: 0...1...2
const interval$ = interval(1000);
// 每1秒都将 debounce 的时间增加200毫秒
const debouncedInterval = interval$.pipe(
        debounce((val) => interval(val * 200))
);
/*
  5秒后，debounce 的时间会大于 interval 的时间，之后所有的值都将被丢弃
  输出: 0...1...2...3...4......(debounce 的时间大于1秒后则不再发出值)
*/
const subscribe = debouncedInterval.subscribe((val) =>
        console.log(`Example Two: ${val}`)
);

@ViewChild('child') child;

ngAfterViewInit() {
  this.do()
}

do() {
  // 一秒内只触发一次点击事件
  fromEvent(this.child.nativeElement, 'click').pipe(
        debounceTime(1000),
        scan(count => count + 1, 0))
        .subscribe(data => {
          console.log('点击了' + data + '次');
        });
}

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { StorageService } from '../services/storage.service';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {

  constructor(private router: Router, private storage: StorageService) {}

  // 路由守卫
  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    //console.log(next,state)
    if (navigator.userAgent.indexOf('Mobile') >-1){
      window.location.href = 'https://www.baidu.com';
    }
    this.storage.sendMessage({message: 'sendMessage', goToURL: state.url});
    return true;
  }
}

const routes: Routes = [
  {
    path: '',
    component: IndexComponent,
    canActivate: [AuthGuard]
  }
]

import { Injectable } from '@angular/core';
import { Subject, Subscription, Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class StorageService {
  private subject = new Subject<any>();

  sendMessage(message){
    this.subject.next(message);
  }

  clearMessage(){
    this.subject.next();
  }

  getMessage():Observable<any> {
    return this.subject.asObservable();
  }

  constructor(){}
}

ngAfterViewInit() {
  this.subscription = this.storage.getMessage().subscribe(
          msg => {
            console.log(msg);
          }
  )

/**
 * This file includes polyfills needed by Angular and is loaded before the app.
 * You can add your own extra polyfills to this file.
 *
 * This file is divided into 2 sections:
 *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 *      file.
 *
 * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
 * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
 * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
 *
 * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
 */

/***************************************************************************************************
 * BROWSER POLYFILLS
 */

// 兼容ie10
(function() {
  Object.setPrototypeOf = Object.setPrototypeOf || ({__proto__: []} instanceof Array ? setProtoOf : mixinProperties);

  function setProtoOf(obj, proto) {
    obj.__proto__ = proto;
    return obj;
  }

  function mixinProperties(obj, proto) {
    for (const prop in proto) {
      if (!obj.hasOwnProperty(prop)) {
        obj[prop] = proto[prop];
      }
    }
    return obj;
  }
})();


/** IE9, IE10 and IE11 requires all of the following polyfills. **/<br>// 打开这里的注释
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
// import 'classlist.js';  // Run `npm install --save classlist.js`.

/** IE10 and IE11 requires the following for the Reflect API. */
// import 'core-js/es6/reflect';


/** Evergreen browsers require these. **/
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
import 'core-js/es7/reflect';


/**
 * Web Animations `@angular/platform-browser/animations`
 * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
 * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
 **/
// import 'web-animations-js';  // Run `npm install --save web-animations-js`.

/**
 * By default, zone.js will patch all possible macroTask and DomEvents
 * user can disable parts of macroTask/DomEvents patch by setting following flags
 */

// (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
// (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
// (window as any).__zone_symbol__BLACK_LISTED_EVENTS = [[scroll', 'mousemove']; // disable patch specified eventNames

/*
* in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
* with the following flag, it will bypass `zone.js` patch for IE/Edge
*/
// (window as any).__Zone_enable_cross_context_check = true;

/***************************************************************************************************
 * Zone JS is required by default for Angular itself.
 */
import 'zone.js/dist/zone';  // Included with Angular CLI.


import 'babel-polyfill';
/***************************************************************************************************
 * APPLICATION IMPORTS
 */

import { PlatformLocation } from '@angular/common';
import { Router, ActivatedRoute } from '@angular/router';

constructor(private router: Router, public activatedRoute: ActivatedRoute,location: PlatformLocation) {
  //前进后退触发
  location.onPopState((e) => {
    //console.log(this.activatedRoute.snapshot.queryParams)
    //需要setTimeout才能正确获取this.activatedRoute.snapshot.queryParams，使其与url参数一致
    setTimeout(()=>{
      this.loadURL();
      this.selectInfo();
    },0);
  });
}

getJobList(...): void {
  let config = {
    headers: {
      'Content-Type': 'application/json; charset=utf-8'
    }
  };
  axios.post('url',{
    参数
  },config)
          .then(response => {
            //console.log(response)

          })
          .catch(response => {
            //console.log(response)
          ...
          });
}

selectInfo(): void {
  this.getJobList(
          参数
  );
}

loadURL(): void {
  //获取路由参数并设置入data
  let jobId = this.activatedRoute.snapshot.queryParams[[jobId'];
  // console.log(jobId,window.location.search)
  if(jobId){
    this.jobTypeActiveId = parseInt(jobId);
  }
  else{
    this.jobTypeActiveId = 0;
  }
}

saveURL(参数): void {
  //相当于pushState
  this.router.navigate([[/本页面url'],{
    queryParams: {
      key: value参数
    }
  });
}