文档

组件的工作只管用户体验，而不用顾及其它。 它应该提供用于数据绑定的属性和方法，以便作为视图和应用逻辑的中介者

组件应该把诸如从服务器获取数据、验证用户输入或直接往控制台中写日志等工作委托给各种服务。通过把各种处理任务定义到可注入的服务类中，你可以让它被任何组件使用

• 插值表达式

• for循环

• 事件和属性绑定

• 双向绑定

• if

• ngSwitch

• 模板引用变量

• 管道

• 属性型指令

• 结构型指令

• ViewChild

• children

• 绑定class

• 绑定style

• 路径别名

• 设置proxy

• ng-container

  {{ title }}
  {{ !!title ? 1 : 2}}
  {{ title() }}

  // 变量与字符串的拼接
  

• {{item}}


• {{item}}

// 渲染dom标签

h = <h2>title</h2>

trackByFn 返回唯一id

<li *ngFor="let item of items; index as i; trackBy: trackByFn">...</li>


  trackByName(index, it) {
    return it.id;
  }


arr = ['red', 'blue', 'green'];


<ul *ngFor="let item of arr; index as i; first as f; last as l; even as e; odd as o">
  <li [style.color]="item">
    item = {{ item }},<br />
    index = {{ i }},<br />
    Fist? = {{ f }},<br />
    Last? = {{ l }},<br />
    偶素? = {{ e }},<br />
    奇数? = {{ o }}<br />
  </li>
</ul>

循环number

@Pipe({name: 'demoNumber'})
export class DemoNumber implements PipeTransform {
  transform(value, args:string[]) : any {
    let res = [];
    for (let i = 0; i < value; i++) {
        res.push(i);
      }
      return res;
  }
}


<ul>
  <li>Method First Using PIPE</li>
  <li *ngFor='let key of 5 | demoNumber'>
    {{key}}
  </li>
</ul>

硬编码

<ul>
  <li>Method Second</li>
  <li *ngFor='let key of  [1,2]'>
    {{key}}
  </li>
</ul>


<button (click)="alert()" [title]="title">click</button>


import { FormsModule } from '@angular/forms';
@NgModule({
imports: [FormsModule] // 需要这个模块，通常在shared模块中导出
})


<input type="text" name="name" [(ngModel)]="name" /> {{ name }}

展开双向绑定

<input type="text" name="name" [(ngModel)]="name" (ngModelChange)="nameChange($event)"/> {{ name }}


  name = "ajanuw";
  nameChange(v: string) {
    this.name = v.toLocaleUpperCase();
  }


  myName = '';
  ngOnInit() {
    setTimeout(() => this.myName = 'alone', 2000);
  }


<p *ngIf="myName; else elesTemp" >{{ myName }}</p>
<ng-template #elesTemp>
  <p> 暂无数据！</p>
</ng-template>

if/then/else

<p *ngIf="myName; then thenTemp; else elesTemp"></p>
<ng-template #thenTemp>
  <p>{{ myName }}</p>
</ng-template>
<ng-template #elesTemp>
  <p> 暂无数据!</p>
</ng-template>


<div [ngSwitch]="name">
    <p *ngSwitchCase="'ajanuw'">hello {{name}}</p>
    <p *ngSwitchCase="'coo'">bey bey {{name}}</p>
    <p *ngSwitchCase="'boo'">i'm {{name}}...</p>
    <p *ngSwitchDefault>not name!</p>
</div>


<div>{{ name.name }}_{{ name.value }}</div>
<input type="text" name="name" value="123" #name />
<button (click)="onClick(name.value)">click me</button>

 onClick(v: string) {
    l(v); // 123
  }

// 获取组件实例(只能在模板中调用)，类似react使用ref获取组件实例
<app-hello #hello></app-hello>
<button (click)="hello.event()">click me</button>


<p>{{ 'ajanuw' | uppercase }}</p>  全大写 -> AJANUW
<p>{{ 'Ajanuw' | lowercase }}</p>  全小写 -> ajanuw
<p>{{ 'hi ajanuw' | titlecase }}</p> 单词首写大写 -> Hi Ajanuw
<p>{{ {name: 'ajanuw'} | json }}</p> onj => json
<p>{{ 'ajanuw' | slice:1:3 }}</p> 类似js的slice -> ja

处理number

<p>{{ 3.141 | number:'1.2-2' }}</p> -> 3.14
<p>{{ 3.141 | number:'1.1-3' }}</p> -> 3.141
<p>{{ 3.141 | number:'2.1-1' }}</p> -> 03.1
<p>{{ 3.141 | number:'2.4-4' }}</p> -> 03.1410
<p>{{ 0.5 | percent }}</p> 百分比 -> 50%

<p>美元： {{ 5 | currency }}</p>  这两个都没什么卵用
<p>英镑：{{ 5 | currency:'GBP' }}</p>

自定义管道

1. 创建

   ng g @schematics/angular:pipe mathCeil --project=angular-universal --module=app.module.ts --no-spec

2. 使用

   {{ 12.3 | mathCeil: 2 }}

3. 实现

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

   @Pipe({
   name: "mathCeil",
   })
   export class MathCeilPipe implements PipeTransform {

   /**

   • @param value 传入的值
   • @param args 传入的参数
     */
     transform(value: number, args?: number): any {
     console.log(args); // 2
     return Math.ceil(value);
     }
     }

   name = "ajanuw";
   onAlert(v: string) {
   l(v);
   }

Input输入， Output 输出

<h2 (click)="handleClick()">{{name}}</h2>

@Input() name: string;
@Output() onAlert = new EventEmitter<string>();
 handleClick() {
    this.onAlert.emit("hello...");
  }

1. 创建指令

   ng g directive highlight

2. 使用

   Welcome to {{ title }}!

3. 实现

   import { Directive, ElementRef, HostListener, Input } from "@angular/core";

   const l = console.log;
   @Directive({
   selector: "[appHighlight]",
   })
   export class HighlightDirective {
   @Input("appHighlight")
   public color: string; // 设置选中时的颜色

   // 初始化时的颜色
   @Input()
   public set defaultColor(color: string) {
   this.setColor(color);
   }

   // el: 获取指令绑定的dom元素
   constructor(private readonly el: ElementRef) {}

   // 响应用户引发的事件
   @HostListener("mouseenter")
   public onMouseEnter(): void {
   this.setColor(this.color || "red");
   }

   @HostListener("mouseleave")
   public onMouseLeave(): void {
   this.setColor(null);
   }

   private setColor(color: string): void {
   this.el.nativeElement.style["color"] = color;
   }
   }

4. 创建指令

   ng g @schematics/angular:directive delay --project=angular-universal --module=app.module.ts --no-spec

5. 使用

   hello {{ username }}

6. 实现

   delay.directive.ts

   import {
   Directive,
   Input,
   TemplateRef,
   ViewContainerRef,
   OnDestroy,
   } from "@angular/core";

   @Directive({
   selector: "[appDelay]",
   })
   export class DelayDirective implements OnDestroy {
   private timer: NodeJS.Timer;
   constructor(
   private readonly templateRef: TemplateRef,
   private readonly viewContainer: ViewContainerRef,
   ) {}

   // 延迟加载dom
   @Input()
   public set appDelay(delayNum: number) {
   this.timer = setTimeout(() => {
   this.viewContainer.createEmbeddedView(this.templateRef);
   }, delayNum);
   }

   ngOnDestroy(): void {
   clearTimeout(this.timer);
   }
   }

获取子组件的实例，和dom节点

<app-hello></app-hello>
<button (click)="onClick()">click me</button>

import { Component, OnInit, AfterViewInit, ViewChild } from "@angular/core";
import { HelloComponent } from "./hello/hello.component";

export class AppComponent implements OnInit, AfterViewInit {

  @ViewChild(HelloComponent)
  private helloRef: HelloComponent; // 注入HelloComponent实例到helloRef

  ngOnInit(): void {}

  // 组件的视图初始化之后
  ngAfterViewInit() {
    this.helloRef.handleOk(); // 调用HelloComponent实例的方法
  }

  onClick() {
    this.helloRef.handleOk();
  }
}

获取dom节点

   <div #test>hello</div>

  @ViewChild("test") public testRef: ElementRef;

  ngAfterViewInit(): void {
    console.log(this.testRef.nativeElement.textContent); // hello
  }

ng-content 获取所有children，用select获取指定children，不能重复获取

<app-hello>
  <h2>hello</h2>
  <footer>footer</footer>
</app-hello>

// app-hello 获取children
<div class="a">
  <ng-content select='footer'></ng-content>
  <ng-content select='h2'></ng-content>
</div>


The current hero's name is {{currentHero?.name}}  // 安全返回

<div *ngIf="hero">
  The hero's name is {{hero!.name}}  // 非空断言操作符
</div>

Undeclared members is {{$any(this).member}} // 使用 $any 转换函数来把表达式转换成 any 类型


  classes = {
    'text-danger': true,
    'text-success': false,
    'p-2': true
  };


<p class="a" [class]="'text-danger'">{{ txt() }}</p>  // 'text-danger'
<p class="a" [class.text-danger]="true">{{ txt() }}</p> // 'a text-danger'
<p class="a" [ngClass]="classes">{{ txt() }}</p> // 'a text-danger p-2'


  styles = {
    color: 'red',
    padding: '1rem',
    backgroundColor: '#e5e5ef75',
    display: 'inline-block'
  };


<p style="font-family: Consolas;" [style.color]="'red'">{{ txt() }}</p>
<p style="font-family: Consolas;" [ngStyle]="styles">{{ txt() }}</p>

• docs 2

proxy.conf.json

{
  "/api": {
    "target": "http://localhost:5000",
    "secure": false,
    "pathRewrite": {
      "^/api": ""
    }
  }
}


  ngOnInit() {
    this.msg$ = this.http.get("/api/ng7", {
      responseType: "text",
    });
  }

用来挂载结构型指令, 避免使用多余的 html 元素挂载指令

<div>
  hello <ng-container *ngIf="!!username"> {{ username }} </ng-container>
</div>

<div>
  hello <span *ngIf="!!username"> {{ username }} </span>
</div>


<input #box (keyup.enter)="onEnter(box.value); box.value=''">