一、angular2基础使用
1、安装angular
npm i @angular/cli -g
安装完成提示：
? Would you like to share anonymous usage data with the Angular Team at Google under
Google’s Privacy Policy at https://policies.google.com/privacy? For more details and
how to change this setting, see http://angular.io/analytics. No
是否联系Angular团队--N
2、创建项目
ng new myapp --skip-install
? Would you like to add Angular routing? No
是否要添加路由？
? Which stylesheet format would you like to use? CSS
要使用哪种样式？
- css
- sass
- scss
- less
- Stylus
3、使用yarn下载包
npm i yarn -g
切换路径安装：
yarn install
4、运行项目
ng serve
5、关闭tslint.json（代码检测）
"defaultSeverity": "none"
6、新建组件
ng generate component 组件名
- 驼峰命名：postItem
在post-item组件的类文件（post-item.component.ts）中selector（组件的选择器）中的：“app-post-item”就是这个heroes组件的元素选择器，所以显示heroes组件，将<app-post-item> 元素添加到appComponent的模板文件（app.component.html）中就可以了。
- 生成文件名：post-item
7、事件绑定(事件名)
<button (click)="showDetail(可选)">详情</button>
showDetails(可选) {
console.log('点击了',可选)
}
8、值绑定 [ value ] = ""
[属性] = ‘值’
<input type="text" [value]="inputvalue">
9、 结构型指令
结构型指令的职责是 HTML 布局。 它们塑造或重塑 DOM 的结构，比如添加、移除或维护这些元素。
星号（*ng）被放在指令的属性名之前。
- 条件指令
<div *ngIf="hero" >{{hero.name}}</div>
- 循环指令
<div *ngFor="let item of 数组></div>
10、输入框双向绑定
-
绑定原生事件（$event）
(keyup)="inputChangeHander($event)"
-
接收
inputChangeHander(e) { const item = e.target.value this.inputvalue = item }
11、组件之间通讯（传值）
-
父组件传子组件
-
父组件html
<子组件 [属性]="值"/>
-
子组件ts
引入：
import { Input } from '@angular/core';输入：
export class ListItemComponent implements OnInit { // @Input() 属性名 获取父组件的值 @Input() listitem constructor() { } ngOnInit(): void { } }
-
父传子
-
子传父
-
子组件html
(事件) = "事件名.emit(可选)"
<button (click)="showDetail.emit(item)">详情</button> -
子组件ts
引入：
import { Output, EventEmitter } from '@angular/core';输出：
@Output() 事件名 = new EventEmitter();
子组件输出事件-
父组件html
<子组件 (子组件事件名) = "事件名1($event)">
-
父组件ts（执行事件1）
事件1(event){ console.log(event) //event为传值的内容 }
-
接收事件传值
