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

Posted 2021-04-26 新钛云服

1 环境搭建

安装 Angular CLI

 

npm install -g @angular/cli

 

ng newmy-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']})exportclass 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']})exportclass 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']})exportclass 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']})exportclass 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']})exportclass 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']})exportclass ChildComponent implements OnInit { constructor() {}  ngOnInit() {}  getData(){ console.log('child methods') } }

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

 

为什么需要服务?

 

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

 

@Injectable() 服务

 

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

 

provide

 

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

 

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

新建一个服务home.service.ts,组件home和组件child同时注入该服务

组件home从服务获取数据,或通过服务传递数据

组件child从服务获取数据,或通过服务传递数据 

 

创建home.service.ts nggenerate service service/homeimport {Injectable } from '@angular/core'; import {Observable, of } from 'rxjs'; @Injectable({ providedIn: 'root'})exportclass 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']})exportclass 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']})exportclass ChildComponent implements OnInit {  constructor(private message:HomeService ) {}  ngOnInit() {   //组件发送消息3 this.message.add('3'); // 组件接收消息 const b = this.message.getMessage(); console.log('组件接收消息'+b) } }

 

 

了解新钛云服

新钛云服出品的部分精品技术干货