房东家的猫
房东家的猫

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 内容投影


    
Heroic Title

    
Something good...

	
   

app-home.components.html




展示的内容就是
	app-nav // 这个组件的内容
    
Heroic Title

    
Something good...


如果是特定的属性的元素

管道的具体使用

创建管道

ng g p xxx  --module=xxx
--module是放在哪个模块里面的

使用

html

{{'我是'|block:'1':'2':'3'}}



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事件之后都可能会运行变更检测：每次按键、鼠标移动、定时器以及服务器的响应。 非纯管道如果不加限制的话，其调用会变得非常频繁。

隔行变色

{{item}}--{{index}}

如果想在组件外面加上一个样式

@Component({
  selector: 'app-block',
  templateUrl: './block.component.html',
  styleUrls: ['./block.component.less'],
  encapsulation:ViewEncapsulation.ShadowDom
})

css

:host {
      display: block;
      border: 1px solid black;
 }

父传子的另一种方式

父

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

子传父的另一种方式

父


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;进行保留空格,看到官网不是特别理解,想了好久还是没想明白,