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