angular组件间的通信（父子、不同组件的数据、方法的传递和调用）

angular组件间的通信（父子、不同组件的数据、方法的传递和调用）

一、不同组件的传值（使用服务解决）

1、创建服务组件

不同组件相互传递，使用服务组件，比较方便，简单，容易。先将公共组件写在服务的组件里面，如果其他组件使用的话，直接调用即可。

创建服务组件：ng g service 路径（例如：services/storage）

2、配置服务组件：

（1）、在app.module.ts里面配置，引用service

import {StorageService} from "./services/storage.service";

（2）、配置服务（StorageService 是服务的类名）

providers: [StorageService],//所需要的服务

3、使用服务组件：

（1）、需要在使用服务的文件里，引用服务组件（注意路径问题）

import {StorageService} from "../../services/storage.service";

（2）、构造函数初始化

constructor(public storage:StorageService) {
  // let s=this.storage.get()
}

（3）、封装服务的组件程序（自己封装为建立、获取、移除）

import { Injectable } from '@angular/core';
​
@Injectable({
  providedIn: 'root'
})
export class StorageService {
​
  constructor() { }
  set(key:string,value:any){
    localStorage.setItem(key,JSON.stringify(value))
  }
  get(key){
    return JSON.parse(localStorage.getItem(key))
  }
  remove(key){
    localStorage.removeItem(key)
  }
}

（4）、调用使用(调用很简单，直接写就ok)

this.storage.set('key',value)
this.storage.get('key')
this.storage.remove('key')

4、写完可以查看是否成功（自己敲的小东西，直接看效果吧）

二、父子组件传值

1、父组件向子组件传值（使用Input）

（1）、子组件引入Input

import { Component, OnInit,Input } from '@angular/core';
​
@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {
​
  @Input() title:any;
  @Input() home:any;
  @Input() run:any;
  constructor() { }
​
  ngOnInit(): void {
  }
}
​

（2）、父组件使用子组件时对子组件进行传值（在父组件里）

注：title是字符串、run是方法、home是整个父组件

父组件Html文件

<app-header [title]="title" [run]="run" [home]="this"></app-header>

父组件Ts文件

export class HomeComponent implements OnInit {
​
  public title:string="首页组件的标题"
​
  constructor() { }
​
  ngOnInit(): void {
  }
  keydown(element){
    if(element.target.keyCode=13){
      console.log('值：',element.target.keyCode)
      this.title='这是已经改变的标题'
    }
  }
  run(){
    alert('我是父组件的run方法')
  }
​
}

2、子组件向父组件传值

1）、使用ViewChild

（1）、引用ViewChild

父组件的TS

import { Component, OnInit ,ViewChild,ElementRef} from '@angular/core';
@ViewChild('foot') foot:any

父组件的Html

<app-foot #foot></app-foot>

（2）、调用

this.foot.名字（数据或者是方法等）;

2）、使用Output

（1）、引用output、EventEmitter

import { Component, OnInit,Output,EventEmitter } from '@angular/core';

（2）、初始化output

@Output() private  outer=new EventEmitter()

（3）、广播数据（这里我是加的按钮，也可以使用钩子开始就广播，也可以使用某种触发器）

sendmessage(){
  this.outer.emit('我是子组件要广播的数据')
}

（4）、调用传值

父组件html

<app-foot (outer)="run($event)"></app-foot>

父组件Ts

run($e){
  console.log('shuju',$e)
  //alert($e)
}

(5)效果

以上，所有都是自己学习使用，请勿盗用，希望可以对你的学习有所帮助，感谢。