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/