angular9的学习(三)

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}}