Blog

组件通讯，意在不同的指令和组件之间共享信息。

父->子 input

1
2
3
4
5

// parent.html
<child [content]="i"></child>

// child.ts
@Input() content:string;

子->父 output

1
2
3
4
5
6
7

// parent.html
<child (changeNumber)="changeNumber($event)"></child>

// child.ts
@Output() changeNumber: EventEmitter<number> = new EventEmitter();

this.changeNumber(1);

开始准备

1. 安装nodejs

   1

   npm -v

2. 安装@angular/cli

   1	npm i -g @angular/cli

3. CLI命令建立项目

   1	ng new ng7demo

   选择是否加入路由模块以及哪种css预处理器

可ctrl+c取消自动安装node_modules，手动进入项目npm install node-sass安装不上可切换淘宝镜像库或者用cnpm安装

1. npm config set registry https://registry.npm.taobao.org npm install

or

2. npm install -g cnpm cnpm install

3. 启动项目

   1	ng serve --open // 自动打开浏览器 http://localhost:4200/

h5 132合法标签 大而全的angular emmm一上午要讲基础–还都是基本例子基本都见过

编译器

集成开发环境@angular/cli

模板引擎

组件库

• datagrid
• tree z-tree
• datepicker
• formvalid ng2-admin 比较接地气
• JHipster

• nicefish

• 生成组件

  ng g c User

1

npm install -g @angular/cli