angular5 项目 个人笔记

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_36918222/article/details/79754363

1、使用angular form的时候想在input控件上绑定model抛错了，[(ngModel)]="xxx";

查询官网文档可知 ngModel 指令存在于 npm package: @angular/forms, 参考官网样例在对应的 Module 中导入

import { FormsModule } from "@angular/forms";

2、select和ngFor选择值使用场景

<select class="form-control" [(ngModel)]="type" name="operatorType" (ngModelChange)="xxx">
  <option value=''>--类别--</option>
  <option *ngFor="let item of types;index as i" [value]='i+1'>{{item}}</option>
</select>

Ts:

types: string[] = ['系统登陆','机构登陆','商户登陆'];

type: string = '';

在后期发现这样使用不方便，如果想默认显示‘系统登录’，就不要用ngModel

<select class="form-control" name="xxx" (change)="setValue(select.value)" #select >//这里的#select是声明模板引用变量

<option *ngFor="let item of types;index as i" [value]="i+1" >{{ item }}</option>

</select>

3、标签监听事件 -

(ngModelChange)="setType(type)"  这里的type为ngModel 绑定的值

 *ngIf="typeValue==2 || typeValue==3" 
[hidden]="typeValue!=2 && typeValue!=3"
这里的hidden与ngIf的区别就是hidden占文档流，ngIf不占文档流

4、标签绑定值

[(ngModel)]="operatorType"  value="{{ operatorType }}" 这里的{{}} 可以省略

5、页面跳转

import { Router } from '@angular/router';
constructor(private router:Router);
this.router.navigateByUrl("/xxx");
/xxx为要跳转的链接

可以自己定义一个service 封装此方法在service.module的根目录的providers增加此service即可

6、表单提交

form标签上增加 

(ngSubmit)="func(type)"

7、监听事件

ng-keypress=“func（$event）”

func(event:any){

    if(event:keyCode == 13){

        this.onSubmit();

    }

}

8、父子组件之间数据传递，ViewChild获取子组件

import { ViewChild } from '@angular/core'

import { XXXcomponent } from ' ... '

@ViewChild ( XXXcomponent ) xxx ：XXXcomponent 

使用时

this.xxx.func() 或 参数

原文：http://blog.sina.com.cn/s/blog_991f90200102xfqc.html

9、键盘监听事件

(keyup)="func1()"  键盘按下弹上来时调用func1方法

(keyup.enter) = "func1()"  按回车 才会调用func1方法

(blur) = "func1()" 鼠标点击失焦调用func1方法

10、新增加属性指令

1) ng g directive xxx

2) 要使用属性指令的module下 import  xxx.directive

3) module下 declarations新增 xxx

4) 页面中直接使用<p xxx></p>

官方文档

https://angular.cn/guide/attribute-directives

11、使用sweetalert 弹出框

根目录的styles.scss下 @import "~sweetalert/dist/sweetalert.css"

要使用组件的componenet.ts下 import swal from 'sweetalert'

swal("xxx")使用

具体使用的中文文档

http://mishengqiang.com/sweetalert/