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,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 ./

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!