angular 组件间传值与通信的方法

1 环境搭建

  安装 Angular CLI

npm install -g @angular/cli

ng new my-app

cd my-app

npm start/ng serve --open

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

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

2 页面创建

ng generate component view/home

ng 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() {  

    //组件发送消息3
    this.message.add('3');
    // 组件接收消息
    const b = this.message.getMessage();
    console.log('组件接收消息'+b)
  } 

}