常见的Angular装饰器

发表于 2019-10-02 更新于 2019-11-29
本文字数： 3.8k 阅读时长 ≈ 3 分钟

1. @Attribute

顾名思义，是用来寻找宿主元素属性值的。

@Directive({
  selector: '[test]'
})
export class TestDirective {
  constructor(
    @Attribute('type') type
  ) {
    console.log(type); // text
  }
}
  
@Component({
  selector: 'my-app',
  template: `
    <input type="text" test>
  `,
})
export class App {}

阅读全文 »

angular文件下载

发表于 2019-10-01 更新于 2019-11-28
本文字数： 1.2k 阅读时长 ≈ 1 分钟

// 文件下载
downloadPdf(id: number) {
  this.http.post('/api/documents', { id })
    .subscribe(
      (base64Pdf: string) => {
        const arrayBuffer = base64ToArrayBuffer(base64Pdf); // 创建Array缓冲区
        createAndDownloadBlobFile(arrayBuffer, 'testName');
      },
      error => console.error(error)
    )
}

// Base64到数组缓冲区
export function base64ToArrayBuffer(base64: string) {
  const binaryString = window.atob(base64); //如果不使用base64，则注释这个
  const bytes = new Uint8Array(binaryString.length);
  return bytes.map((byte, i) => binaryString.charCodeAt(i));
}

// 创建Blob对象并下载文件
createAndDownloadBlobFile(body, filename, extension = 'pdf') {
  const blob = new Blob([body]);
  const fileName = `${filename}.${extension}`;
  if (navigator.msSaveBlob) {
    // IE 10+
    navigator.msSaveBlob(blob, fileName);
  } else {
    const link = document.createElement('a');
    //支持HTML5下载属性的浏览器
    if (link.download !== undefined) {
      const url = URL.createObjectURL(blob);
      link.setAttribute('href', url);
      link.setAttribute('download', fileName);
      link.style.visibility = 'hidden';
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }
  }
}

如何创建一个属于自己的Angular Library并发布到npm

发表于 2019-10-01 更新于 2019-11-28
本文字数： 3.1k 阅读时长 ≈ 3 分钟

1. 前言

Angular CLI 7.0.0 增加了一个令人兴奋的脚手架配置项：–create-application，其中默认值是true，如果不设置，则在新工作空间的src文件夹中创建一个新的初始应用程序项目。如果为false，则创建一个没有初始应用程序的空工作区。想了解更多配置项，动起你的小鼠标用力点击这里。

阅读全文 »

Angular Router Resolve预加载数据

发表于 2019-09-30 更新于 2019-11-28
本文字数： 3.8k 阅读时长 ≈ 3 分钟

1. 前言

开发中我们可能会遇到这样一个问题：路由到一个新的页面前可能需要某些数据才能在要加载的新页面请求数据，这个时候如果我们路由到新页面再去获取预先的数据有可能来不及或者是带来不好的用户体验。这个时候如果有一种办法能在即将加载新页面的时候就预准备好了必要数据，等到加载新页面的时候整好可以拿到数据，那就很完美了。Angular Router Resolve就是这样的一种存在！

阅读全文 »

深度解析angular中的ng-template

发表于 2019-09-29 更新于 2019-11-28
本文字数： 1.7k 阅读时长 ≈ 2 分钟

1. 引言

我们在angular项目中经常会用到<ng-template>，但是我们是否有想过放置在里边的代码最终都去哪儿了呢？

其实angular中的<ng-template>和HMTL中的<template>是类似的，都是作为预渲染的一个内容模版器，DOM解析器会处理里边的元素内容，以确保内容有效，但是元素的内容不会被渲染，在适当的时机，我们可以让它渲染到页面上。有关HTML的<template>介绍可以查看这里。

阅读全文 »

angular templates模版内函数的最佳实践

发表于 2019-09-28 更新于 2019-11-28
本文字数： 968 阅读时长 ≈ 1 分钟

1. 前言

在angular中，我们应该在templates中尽可能的少写逻辑代码，保持简洁，这样页面的加载效率会更好。但是我们经常会遇到要将某某属性绑定到元素上，又或者转换、动态计算以便插入对应的字符串。当我们在templates模版（插值表达式{{}}）中调用函数进行数据绑定或者字符串插值的时候，我们会发现我们的函数会被无限次调用（含鼠标在页面上移动）！

这是个很糟糕的体验，那么究其原因是什么呢？答案是：angular变更检测机制。函数在angular生命周期钩子函数ngDoCheck之后，这个钩子函数直接链接到每个变化检测周期。虽然templates模版（插值表达式{{}}）提供了getter方法，但它只能从某个变量中访问属性，我们如果计算函数更复杂，那么就会浪费用户机器资源，因为我们必须使用资源来计算相同的结果。

阅读全文 »

angular中使用pipe管道过滤结果集

发表于 2019-09-27 更新于 2019-11-28
本文字数： 1.8k 阅读时长 ≈ 2 分钟

1. 引子

假设我们需要一个过滤管道来负责过滤应用程序中的列表。

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ 
  name: ‘filter’
})
export class FilterPipe implements PipeTransform {
  transform(arr: string[], searchValue: string) { 
    if (!searchValue) return arr;

    return arr.filter(value => { 
      return value.toLowerCase().indexOf(searchValue.toLowerCase()) > -1; 
    }); 
  }
}

阅读全文 »

Angular项目从CSS迁移到SCSS

发表于 2019-09-26 更新于 2019-12-02
本文字数： 1.7k 阅读时长 ≈ 2 分钟

1. 前言

通常，当我们使用angular-cli启动应用程序时，默认情况下它将使用css，除非我们按以下方式创建项目。

1	ng new your_application --style=scss

但是当我们开发项目到一半的时候，突然有一天研究某些东西后发现使用scss比css好用多了，这个时候我们将面临一个大问题，怎么将当前项目的css全部转成scss进行以后的开发且置为默认项呢？别着急，往下看！

阅读全文 »

Rxjs【take, first, takeUntil, concatAll】

发表于 2019-06-25 更新于 2019-11-28
本文字数： 8.4k 阅读时长 ≈ 8 分钟

Rxjs学习之路

1、小贴士

这篇文章是我的Angular Rxjs Series中的第篇三文章，在继续阅读本文之前，您至少应该熟悉系列中的第一篇基础文章：

Rxjs6都改变了些什么？

Rxjs【Observable】

1	// 图谱
2	// ----- 代表一个Observable
3	// -----X 代表一个Observable有错误发生
4	// -----\| 代表一个Observable结束
5	// (1234)\| 代表一个同步Observable结束
6
7	// 特别提示：以下的操作符介绍均采用rxjs6的写法！！！

阅读全文 »

Rxjs【Observable】

发表于 2019-06-24 更新于 2019-11-28
本文字数： 6.1k 阅读时长 ≈ 6 分钟

Observable创建的方式Rxjs库已经内置支持了很多操作符，所以我们只需要理解并使用即可

1、create

从任何形式创建一个Observable，静态方法，可以直接使用。

// 1. 创建Observable
const myObservable = Observable.create((observer) => {
    observer.next('Vivian');
    observer.next('Jeanne');
    setTimeout(() => {
        observer.next('====create rxjs！');
    }, 2000);
    observer.complete();
    observer.next('not work ?');
});

// 第一种写法
console.log('===1====start');
myObservable.subscribe(value => {
    console.log('1. 创建Observable: ', value);
});
console.log('===1====end');

// 第二种写法
const innerObserver = {
    next: (value) => { console.log('2. 创建Observable: ', value); },
    error: (error) => { console.log('2. 创建Observable--Error', error); },
    complete: () => { console.log('2.创建Observable: complete'); }
};
console.log('===2====start');
myObservable.subscribe(innerObserver);
console.log('===2====end');

阅读全文 »

1	@Directive({
2	selector: '[test]'
3	})
4	export class TestDirective {
5	constructor(
6	@Attribute('type') type
7	) {
8	console.log(type); // text
9	}
10	}
11
12	@Component({
13	selector: 'my-app',
14	template: `
15	<input type="text" test>
16	`,
17	})
18	export class App {}

1	// 文件下载
2	downloadPdf(id: number) {
3	this.http.post('/api/documents', { id })
4	.subscribe(
5	(base64Pdf: string) => {
6	const arrayBuffer = base64ToArrayBuffer(base64Pdf); // 创建Array缓冲区
7	createAndDownloadBlobFile(arrayBuffer, 'testName');
8	},
9	error => console.error(error)
10	)
11	}
12
13	// Base64到数组缓冲区
14	export function base64ToArrayBuffer(base64: string) {
15	const binaryString = window.atob(base64); //如果不使用base64，则注释这个
16	const bytes = new Uint8Array(binaryString.length);
17	return bytes.map((byte, i) => binaryString.charCodeAt(i));
18	}
19
20	// 创建Blob对象并下载文件
21	createAndDownloadBlobFile(body, filename, extension = 'pdf') {
22	const blob = new Blob([body]);
23	const fileName = `${filename}.${extension}`;
24	if (navigator.msSaveBlob) {
25	// IE 10+
26	navigator.msSaveBlob(blob, fileName);
27	} else {
28	const link = document.createElement('a');
29	//支持HTML5下载属性的浏览器
30	if (link.download !== undefined) {
31	const url = URL.createObjectURL(blob);
32	link.setAttribute('href', url);
33	link.setAttribute('download', fileName);
34	link.style.visibility = 'hidden';
35	document.body.appendChild(link);
36	link.click();
37	document.body.removeChild(link);
38	}
39	}
40	}

1	import { Pipe, PipeTransform } from '@angular/core';
2
3	@Pipe({
4	name: ‘filter’
5	})
6	export class FilterPipe implements PipeTransform {
7	transform(arr: string[], searchValue: string) {
8	if (!searchValue) return arr;
9
10	return arr.filter(value => {
11	return value.toLowerCase().indexOf(searchValue.toLowerCase()) > -1;
12	});
13	}
14	}

1	// 1. 创建Observable
2	const myObservable = Observable.create((observer) => {
3	observer.next('Vivian');
4	observer.next('Jeanne');
5	setTimeout(() => {
6	observer.next('====create rxjs！');
7	}, 2000);
8	observer.complete();
9	observer.next('not work ?');
10	});
11
12	// 第一种写法
13	console.log('===1====start');
14	myObservable.subscribe(value => {
15	console.log('1. 创建Observable: ', value);
16	});
17	console.log('===1====end');
18
19	// 第二种写法
20	const innerObserver = {
21	next: (value) => { console.log('2. 创建Observable: ', value); },
22	error: (error) => { console.log('2. 创建Observable--Error', error); },
23	complete: () => { console.log('2.创建Observable: complete'); }
24	};
25	console.log('===2====start');
26	myObservable.subscribe(innerObserver);
27	console.log('===2====end');