Angular随手记

今天用Angular进行开发时，想要读取input的输入值：

<mat-input-container>
    <input matInput type="number" (ng-model)="dtaDte" 
    #ctrl="ngModel"
placeholder="年月" required>
</mat-input-container>

there is no directive with 'exportAs' set to 'ngModel'

结构型指令

*是语法糖
<a *ngIf="user.login">退出</a>
相当于
<ng-template ngIf="user.login">
（还是这样的？<ng-template [ngIf]="user.login">

    <a>退出</a>
</ng-template>
ngIf源码：
//声明这是个指令
@Directve{selector:'[ngIf]'}
export class NgIf{
    private hasView = false;
    constructor(private _viewContainer:ViewContainerRef, private _template:TemplateRef<Object>){}
@Input()
set ngIf(condition :any){
    if(condition && !this.hasView){
    this.hasView = true;
    //如果条件为真，创建该模板视图
    this.viewCOntainer.createEmbeddedView(this._template);
    }
    else if(!condition && this.hasView){
    This.hasView = false;
    this.viewContainer.clear();
    }
}
}

模块

entryComponents:进入后立刻加载，初始化
exports：某些组件是给大家公用的，默认只能自己模块用
forRoot()和forChild():
ngClass:用于条件动态指定样式类，适合对样式做大量更改的情况
ngStyle:用于条件动态指定样式，适合少量更改的情况
[class.yourcondition] = “condition” 直接对应一个条件

4.5 模板驱动型表单
表单的数据绑定
ngModel
表单验证
响应式表单：FormControl, FormGroup, FormBuilder
验证器和异步验证器
自定义表单控件：表单过于复杂之后，逻辑难以清晰：拆成若干简单问题

表单

<form #f="ngForm">
  <mat-input-container class="full-width">
    <input type="text" 
    matInput 
    placeholder="快速新建一个任务"
    [(ngModel)]="desc"
    name = "desc"
    required
    >

    <button matSuffix mat-icon-button type="button"> 
      <mat-icon>send </mat-icon>
    </button>
    <mat-error>
      不能为空哦
    </mat-error>
  </mat-input-container>

</form>

<div>
  表单数据：{{f.value | json}}
</div>
<div>
  表单验证状态:{{f.valid | json}}
</div>

提交：
监听ngSubmit事件：
（ngSubmit)=”onSubmit(f, $event)”

点击button后没反应：
没有导入import { NgForm } from "@angular/forms";
ps：好像不是这个问题，是sendQuickTask()的条件写错了，this.desc.trim()没有加！

import { Component, OnInit, 
  Output,
  HostListener,
  EventEmitter } from '@angular/core';
import { NgForm } from "@angular/forms";

@Component({
  selector: 'app-quick-task',
  templateUrl: './quick-task.component.html',
  styleUrls: ['./quick-task.component.scss']
})
export class QuickTaskComponent implements OnInit {

  desc: string;
  @Output() quickTask = new EventEmitter();
  constructor() { }

  ngOnInit() {
  }
  onSubmit({value, valid}, ev:Event){
    ev.preventDefault();
    console.log(JSON.stringify(value));
    console.log(JSON.stringify(valid));
  }

  @HostListener('keyup.enter') //除了点击，还要监听键盘的回车
  sendQuickTask(){
    // if(!this.desc || this.desc.length === 0 || !this.desc.trim()){
    //   return;
    // }
    console.log(this.desc);
    this.quickTask.emit(this.desc);
    this.desc = '';
  }

}

html:
<mat-input-container class="full-width">
  <input type="text" 
  matInput 
  placeholder="快速新建一个任务"
  [(ngModel)]="desc"

  >
  <button matSuffix mat-icon-button 
  type="button" (click)="sendQuickTask()"> 
    <mat-icon>send </mat-icon>
  </button>
  <mat-error>不能为空哦</mat-error>
</mat-input-container>

响应式表单：
FormControl, FormGroup, FormBuilder
验证器和异步验证器(如用户是否存在，要和服务器交互)
动态指定验证器
重写登录页面：

form:
[formGroup]="form" (ngSubmit)="onSubmit(form,$event)">
formControlName="email":声明成表单控件，绑定到

加入service：报错

ERROR Error：Uncaught(in promise):Error: StaticInjectorError(AppModule)[LoginComponent -> LoginService]:
StaticInjectorError(Platform:core)[LoginComponent -> LoginService ]:
NullInjectorError:No provider for LoginService
方法：在LogiComponent的providers里加入LoginService

ng build --prod --base-href ./