Angular 父子组件传值，非父子组件传值

一、子组件调用父组件，父组件给子组件传值

引入Input

header.component.ts

import { Component, OnInit, Input, Output } from '@angular/core';@Component({selector: 'app-header',templateUrl: './header.component.html',styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {// 接收父组件传来的值// 传入父组件的值@Input() title:any;@Input() msg:any;// 传入父组件的方法@Input() run:any;// 传入父组件@Input() home:any;constructor() { }ngOnInit() {}// 获取父组件的数据getParentMsg() {alert(this.msg);}getParentRun() {// 直接调用父组件，操作父组件console.log(this.home.msg);this.home.run();this.run();}
}

header.component.html

<header>{
   {title}}</header><button (click)="getParentMsg()">获取父组件传入的数据</button>
<button (click)="getParentRun()">子组件中获取父组件的方法</button>

定义父组件，传入值

home.component.ts

import { Component, OnInit } from '@angular/core';@Component({selector: 'app-home',templateUrl: './home.component.html',styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {public title:string="首页组件的标题";public msg:string="我是父组件的msg";constructor() { }ngOnInit() {}getParentRun() {alert("我是父组件的方法");}
}

home.component.html

<app-header [title]="title" [msg]="msg" [run]="run" [home]="this"></app-header><br><p>我是home
</p>

二、父组件调用子组件

2.1 通过@ViewChild进行调用

new.conponent.html

<!-- 绑定子组件，并定义id -->
<app-footer #footer></app-footer><br/>
<hr/>
<br/>
<div>我是一个新闻组件</div>
<button (click)="getChildMsg()">获取子组件的msg</button>
<br/>
<button (click)="doChildMethod()">执行子组件的方法</button>

new.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';@Component({selector: 'app-news',templateUrl: './news.component.html',styleUrls: ['./news.component.scss']
})
export class NewsComponent implements OnInit {// 绑定id为footer的组件，并实例化为footer@ViewChild('footer',{static: false}) footer:any;constructor() { }ngOnInit() {}// 调用子组件的变量getChildMsg() {alert(this.footer.msg);}// 调用子组件的方法doChildMethod() {this.footer.run();}
}

2.2 使用@output触发父组件

Output是通过事件驱动的方式，来让子组件触发父组件

footer.component.ts

import { Component, OnInit, Output, EventEmitter } from '@angular/core';@Component({selector: 'app-footer',templateUrl: './footer.component.html',styleUrls: ['./footer.component.scss']
})
export class FooterComponent implements OnInit {public msg:string = "我是子组件的msg"// 新建事件驱动@Output() public outer = new EventEmitter();constructor() { }ngOnInit() {}run() {alert("我是子组件的run方法");}sendParent() {// 给父组件广播数据this.outer.emit("我是子组件的数据");}
}

footer.component.html

<div>我的子组件</div><button (click)="sendParent()">子组件广播</button>

news.component.html

<!-- 绑定子组件，并定义id -->
<app-footer #footer (outer)="getFromChild($event)"></app-footer><br/>
<hr/>
<br/>
<div>我是一个新闻组件</div>
<button (click)="getChildMsg()">获取子组件的msg</button>
<br/>
<button (click)="doChildMethod()">执行子组件的方法</button>

news.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';@Component({selector: 'app-news',templateUrl: './news.component.html',styleUrls: ['./news.component.scss']
})
export class NewsComponent implements OnInit {// 绑定id为footer的组件，并实例化为footer@ViewChild('footer',{static: false}) footer:any;constructor() { }ngOnInit() {}// 调用子组件的变量getChildMsg() {alert(this.footer.msg);}// 调用子组件的方法doChildMethod() {this.footer.run();}getFromChild(e) {console.log(e);alert("我是父组件的doChildMethod方法");}
}

通过$event可以获取到子组件给父组件传递的数据。

<!-- 绑定子组件，并定义id -->
<app-footer #footer (outer)="getFromChild($event)"></app-footer>

三、非父子组件传值

通过服务或localstorage实现非父子组件通信。