angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"xxx": {...}
},
"defaultProject": "xxx",
"schematics": {
"@schematics/angular:component": {
"prefix": "app",
"styleext": "scss"
},
"@schematics/angular:directive": {
"prefix": "app"
}
}
}
- $schema` 用于验证 JSON 数据格式
version表示版本newProjectRoot当使用ng generate application | library创建新的项目时，会自动放到该目录下projects放置所有项目的配置，其中一个项目为一个子项，如 xxxx 为一个项目，在创建时自动生成defaultProject属性表示默认项目的名字。
application 和 library 有什么区别？
application 是一个单页面应用，而 library 是一个可以供很多应用共享的模块
ng g application 和 ng new 有什么区别？
ng new NAME创建了一个带默认单页面应用的工作空间，ng g application是在当前工作空间下创建一个新的应用。
schematic 是用来做什么的？
Angular cli 使用
@angular-devkit/schematics生成组件、指令、模块等文件，生成的时候会有一些配置选项，例如ng g c --skipTests --style=scss可以生成一个不带测试文件、使用 scss 为样式文件的组件。如果每次都要手动输入这些配置就会显得麻烦，所以 angular.json 提供了 schematics 属性来统一设置一些生成类的命令配置，默认生效于所有project。每个 projects 也有这个选项，但那里的配置仅生效与单个 project 了。预设配置项有：
@schematics/angular:component@schematics/angular:class@schematics/angular:directive@schematics/angular:guard@schematics/angular:module@schematics/angular:pipe@schematics/angular:service以
component为例，如果默认不要测试文件并使用 less，可以配置如下："schematics": { "@schematics/angular:component": { "style": "less" }
"projects": {
"xxx": {
"projectType": "application",
"schematics": {},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {...},
"serve": {...},
"extract-i18n": {...},
"test": {...},
"lint": {...}
}
}
},
-
projectType属性表明了项目类型是appliaction还是library -
schematics配置应用级别的 schematics packages 的选项 -
root属性指定了项目文件的根文件夹，可能为空 -
sourceRoot指定了项目源文件位置 -
prefix组件或指令的前缀 -
architect可以自定义自动化命令这里面最关键的又是 architect 属性，包含了自动化命令配置
- builder：表示要执行的内置程序，CLI内置了一些自动化工具，或者使用第三方提供的自动化工具。
- options：表示针对当前builder所需要的配置项（调用不同的内置程序，是需要传对应的配置项的）
- configurations：表示这个命令的多种调用模式，在此配置里可以定义不同的别名，然后使用不同的配置（配置的字段还是属于 options 里的），最后在使用命令时便可以手动选择不同的模式，例如 development 和 production。
ng-content 内容投影
<app-home>
<h1>Heroic Title</h1>
<p>Something good...</p>
<app-nav></app-nav>
</app-home>
app-home.components.html
<ng-content select="app-nav"></ng-content>
<ng-content></ng-content>
展示的内容就是
app-nav // 这个组件的内容
<h1>Heroic Title</h1>
<p>Something good...</p>
如果是特定的属性的元素
<ng-content select="[app-nav]"></ng-content>
管道的具体使用
创建管道
ng g p xxx --module=xxx
--module是放在哪个模块里面的
使用
html
<h1>{{'我是'|block:'1':'2':'3'}}</h1>
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'block',
pure:true// 默认true 纯管道,可以不写
})
export class BlockPipe implements PipeTransform {
transform(value: unknown, ...args: unknown[]): unknown {
// 第一个参数是传过来的值
console.log(value); // '我是'
// 第二个是传过来的参数数组
console.log(args); // ["1", "2", "3"]
// 返回页面的东西
return value+'123';
}
}
链式使用
{{xxx|A|B|C}}
就是执行A管道再执行B再执行C
源码部分有时间研究下
/node_modules/@angular/common/esm5/src/pipes/
纯管道与非纯管道
当
pure为true时，为纯管道，当pure为false时，为非纯管道。默认情况下，管道都是纯的。
Angular只有在它检测到输入值发生了纯变更时才会执行纯管道。 纯变更是指对原始类型值(String、Number、Boolean、Symbol)的更改或者对对象引用(Date、Array、Function、Object)的更改。
非纯管道在
Angular的每一次变更检测中都会执行。每一次JavaScript事件之后都可能会运行变更检测：每次按键、鼠标移动、定时器以及服务器的响应。 非纯管道如果不加限制的话，其调用会变得非常频繁。
隔行变色
<div *ngFor="let item of arrA;let index=index;let odd=odd"
[class.ccc]="odd">{{item}}--{{index}}</div>
如果想在组件外面加上一个样式
@Component({
selector: 'app-block',
templateUrl: './block.component.html',
styleUrls: ['./block.component.less'],
encapsulation:ViewEncapsulation.ShadowDom
})
css
:host {
display: block;
border: 1px solid black;
}
父传子的另一种方式
父
<app-refs [block]="aaa" views="aaa"></app-refs>
ts
public aaa=1;
子组件
@Component({
selector: 'app-refs',
templateUrl: './refs.component.html',
styleUrls: ['./refs.component.less'],
inputs: ['block','v:views'],
})
public block;
public v;
ngOnInit(): void {
console.log(this.block);
console.log(this.v);
}
子传父的另一种方式
父
<app-refs (a)="onEvery($event)" (b)="onFive($event)"></app-refs>
onEvery(e){
console.log(e);
}
onFive(e){
console.log(e);
}
子
@Component({
outputs: ['a', 'c:b']
})
public a = new EventEmitter();
public c = new EventEmitter();
ngOnInit(): void {
this.a.emit('333');
this.c.emit('444');
}
注入类
class Greeter {
greet(name:string) {
return 'Hello ' + name + '!';
}
}
@Component({
viewProviders: [Greeter],
})
constructor(private greet:Greeter) {
this.blockService = blockService;
}
ngOnInit(): void {
console.log(this.greet.greet('xxx'));
}
保留空格
比如你想行首有一个空格,因为angular 有个
preserveWhitespaces: false默认,会删除可能多余的空格
&ngsp;进行保留空格,看到官网不是特别理解,想了好久还是没想明白,<textarea><div ngPreserveWhitespaces> xxx </div>简单的理解我们需要在某个特定的DOM元素中保留空格
保留{{}}
<div ngNonBindable>{{ 1 + 1 }}</div>
{{1 + 1}}