angular知识点

1、声明属性的几种方法

• public 共有 *（默认）可以在这个类里面使用，也可以在类外面使用

• protected 保护类型 只有在当前类，和它的子类里面可以访问

• private 私有 只有在当前类才可以访问这个属性

2、指令

1. 解析HTML

content = '<h2>我是一个HTML标签</h2>'
<span [innerHTML]='content'></span>

2. 循环dom

arr = [1,3,2,4,5]
<ul>
//let key = index 获取循环的索引
<li *ngFor="let item of arr;let key = index">
{{item}}
</li>
</ul>

3. 条件判断

isShow = true;

<div *ngIf="isShow">
    世界
</div>
<div *ngIf="!isShow">
    中国
</div>
<div *ngIf="isShow">
    世界
</div>

<!-- else -->
<div *ngIf="condition; else elseBlock">Content to render when condition is true.</div>

ngSwitch

<ul [ngSwitch]="score">
<li *ngSwitchCase="1">已支付</li>
<li *ngSwitchCase="1">订单已确定</li>
<li *ngSwitchDefault>无效</li>
</ul>

指令[hidden]：隐藏

4. 动态类名，动态样式

flag = true
textColor = 'red'

<div [ngClass]="{'orange':flag,"blue":!flag}">ngClass演示</div>

//属性值，有引号表示字符串，没有引号，表示变量
<div [ngStyle]="{'color':'blue'}">ngClass演示</div>
<div [ngStyle]="{'color':textColor}">ngClass演示</div>

3、引入静态资源中的文件

picUrl = 'https://.....png'
<img src="assets/images/01.png" />
<img [src]="picUrl" />

4、自定义管道

5、表单事件与事件对象

6、双向数据绑定

mvw
在app.modules文件中引入
import { FormsModule} from ‘@angular/forms’

@NgModel({
imports:[
FormsModule
]
})

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

1. 表单（获取表单数据，数据双向绑定，或直接使用dom获取表单值（不推荐））
2. 代办列表（增加，删除，批量删除，修改状态，去重,数据持久化 localStorage sessionStorage）

7、创建服务

ng g service services/storage

在app.modules文件里面引入
import {StorageService} from ‘./services/storage.service’
@NgModel({
providers:[
StorageService
]
})

在service组件中定义方法，在其他组件中可以使用，使用前，需要引入
import {StorageService} from ‘…/…/services/storage.service’

var storage = new StorageService() (不推荐)

//推荐方法
constructor(public storage:StorageService){
let a = this.storage.get()
}

8、angular中的dom操作

1. 原生js 获取dom节点
   在ngOnInit()钩子中，组件和指令初始化完成，并不是真正的dom加载完成（dom上有angular指令时，获取不到dom）

ngAfterViewInit() 视图加载完成后出发的方法 dom加载完成，在这个钩子中可以操作dom

2. angular提供的ViewChild（对原生js进行封装）

• 获取dom节点

<div #myBox>我是dom节点</div>

import {ViewChild} from '@angular/core'
@ViewChild('myBox') myBox:any

ngAfterViewInit(){
   console.log(this.myBox.nativeElement) 
}

• 获取组件实例

<app-header #header>我是dom节点</app-header>

import {ViewChild} from '@angular/core'
@ViewChild('header') header:any

ngAfterViewInit(){
    //假设app-header组件中有run方法，父组件直接调用
   console.log(this.header.run()) 
}

9、组件之间的通信

1. @Input() //属性和方法都可以传递
   //home是父组件整个实例
   <app-child [home]=“this”>

2. @Output()

import { EventEmitter, Output } from ‘@angular/core’;
@Output() voted = new EventEmitter()

3. ngOnChanges()

import { OnChanges, SimpleChanges } from ‘@angular/core’
ngOnChanges(changes: SimpleChanges) {

}
4. 父组件调用@ViewChild()
5. 通过服务通讯