1 环境搭建

  安装 Angular CLI

npm install -g @angular/cling new my-appcd my-appnpm start/ng serve --open

ng serve 命令会启动开发服务器、监视文件，并在这些文件发生更改时重建应用。

--open（或者只用 -o 缩写）选项会自动打开你的浏览器，并访问 http://localhost:4200/。

2 页面创建

ng generate component view/homeng generate component view/child

3 参数传递

方法1 @Input 父级组件向子组件传递

父级组件home.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import {ChildComponent} from '../child/child.component'; @Component({selector: 'app-home',templateUrl: './home.component.html',styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {  goChild = '23456' constructor() { }  ngOnInit() { } }

父级组件home.html.ts

<app-child [fromParentData]="goChild" (changeNumber)="onListen($event)"></app-child>

app-child是在home.component.ts生成组件时，默认生成的。下边代码的selector

@Component({selector: 'app-home',templateUrl: './home.component.html',styleUrls: ['./home.component.css']
})

子组件 child.component.ts

import { Component, OnInit, Output, Input } from '@angular/core';
import {Injectable,EventEmitter} from '@angular/core'; import {HomeService} from '../../service/home.service'@Component({selector: 'app-child',templateUrl: './child.component.html',styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {@Input() fromParentData; constructor() {}ngOnInit() {console.log(this.fromParentData)} }

方法 2 EventEmitter, @output 子组件传递消息给父组件  

子组件创建事件 EventEmitter 对象，使用@output公开出去
父组件监听子组件@output出来的方法，然后处理事件 

home.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import {ChildComponent} from '../child/child.component'; @Component({selector: 'app-home',templateUrl: './home.component.html',styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {constructor() { }  ngOnInit() { }onListen(arg){console.log(arg)}}

home.component.html

<app-child [fromParentData]="goChild" (changeNumber)="onListen($event)"></app-child>

child.component.ts

import { Component, OnInit, Output, Input } from '@angular/core';
import {Injectable,EventEmitter} from '@angular/core';  @Component({selector: 'app-child',templateUrl: './child.component.html',styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {@Input() fromParentData;@Output() changeNumber: EventEmitter<number> = new EventEmitter(); constructor(private message:HomeService ) {}ngOnInit() {console.log(this.fromParentData)this.changeNumber.emit(1)} }

方法3 使用 @ViewChild

一般用于父组件给子组件传递信息,或者父组件调用子组件的方法

home.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import {ChildComponent} from '../child/child.component'; @Component({selector: 'app-home',templateUrl: './home.component.html',styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit { @ViewChild(ChildComponent, {static: false}) child:ChildComponent; constructor() { } ngAfterViewInit() {this.child.getData();}  }

home.component.html

<app-child></app-child>

child.component.ts

import { Component, OnInit, Output, Input } from '@angular/core';
import {Injectable,EventEmitter} from '@angular/core';  @Component({selector: 'app-child',templateUrl: './child.component.html',styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit { constructor() {}ngOnInit() {}getData(){console.log('child methods')}}

方法4 service进行通讯，两个组件同时注入某个服务

为什么需要服务?

组件不应该直接获取或保存数据，它们不应该了解是否在展示假数据。 它们应该聚焦于展示数据，而把数据访问的职责委托给某个服务。

@Injectable() 服务

@Injectable()装饰器。 它把这个类标记为依赖注入系统的参与者之一

provide

在要求 Angular 把服务 注入到组件之前，你必须先把这个服务提供给依赖注入系统。默认情况下，Angular CLI 命令 ng generate service 会通过给 @Injectable 装饰器添加元数据的形式，用根注入器将你的服务注册成为提供商。

@Injectable({providedIn: 'root',
})

新建一个服务home.service.ts,组件home和组件child同时注入该服务
组件home从服务获取数据,或通过服务传递数据
组件child从服务获取数据,或通过服务传递数据 

创建home.service.ts

ng generate service service/home

import { Injectable } from '@angular/core';import { Observable, of } from 'rxjs'; @Injectable({providedIn: 'root'
})
export class HomeService { messages: string[] = ['12'];add(message: string) {console.log(message)this.messages.push(message);}getMessage():Observable<any> {return of(this.messages);// return {this.messages}}  }

home.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import {ChildComponent} from '../child/child.component';import {HomeService} from '../../service/home.service'@Component({selector: 'app-home',templateUrl: './home.component.html',styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {  arr : string[] = [];constructor(private message:HomeService) { }  ngOnInit() {this.arr = this.message.getMessage();console.log(this.arr)} }

child.component.ts

import { Component, OnInit, Output, Input } from '@angular/core';
import {Injectable,EventEmitter} from '@angular/core'; import {HomeService} from '../../service/home.service'@Component({selector: 'app-child',templateUrl: './child.component.html',styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {constructor(private message:HomeService ) {}ngOnInit() {  //组件发送消息3this.message.add('3');// 组件接收消息const b = this.message.getMessage();console.log('组件接收消息'+b)} }