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

2021-07-09

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)效果

 

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