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实现非父子组件通信。

Angular 父子组件传值，非父子组件传值相关推荐

父子组建传值_浅谈Vue父子组件和非父子组件传值问题
本文介绍了浅谈Vue父子组件和非父子组件传值问题,分享给大家,具体如下: 1.如何创建组件 1.新建一个组件,如:在goods文件夹下新建goodsList.vue goodsList组件 expor ...
this指向-作用域、作用域链-预解析变量提升-Vue组件传值父子子父非父子-Vue数据双向绑定原理
目录 this指向作用域.作用域链预解析变量提升 Vue组件传值父子子父非父子 Vue数据双向绑定原理 1.this指向函数的this指向看调用.不看声明 (1)普通函数调用 ①函数名 ...
Vue.js组件-组件通信-非父子组件传值以及其他通信方式
非父子组件传值非父子组件指的是兄弟组件或完全无关的两个组件兄弟组件兄弟组件可以通过父组件进行数据中转,简单来讲,A是父组件,BC是两个兄弟组,那么我们可以先B传给A,再A传给C.示例如图: Ev ...
02-React受控组件及非受控组件、数据渲染、事件处理、组件通信
一.受控组件和非受控组件 React组件的数据渲染是否被调用是通过传递过来的props完全控制控制则为受控组件,否则非受控组件. 二.数据渲染 1.条件渲染 { flag ? "开启& ...
java中组件与容器_java中的容器组件和非容器组件
1.java使用到的图形类主要在java.awt 与javax.swing包中. 2.java.awt 与 javax.swing包的区别: ① java.awt中使用的图形类都是依赖于系统的图形库的 ...
[react] 受控组件和非受控组件有什么区别？
[react] 受控组件和非受控组件有什么区别? 受控组件用value和组件的state绑定,当value更新时,会自动更新state 非受控组件没有value,采用ref直接操作dom 个人简介我 ...
深入react技术栈(10):受控组件和非受控组件
我是歌谣放弃很容易但是坚持一定很酷微信公众号关注前端小歌谣受控组件非受控组件受控组件和非受控组件的区别文章参考深入React技术栈
受控组件和非受控组件
受控组件和非受控组件 React的受控组件与非受控组件的概念是相对于表单而言的,在React中表单元素通常会持有一下内部的state,因此它的工作方式与其他HTML元素不一样,而获取表单元素内部sta ...
React中受控组件和非受控组件
受控组件在React中,每当表单的状态发生变化时,都会被写入到组件的state中,这种组件在React被称为受控组件.受控组件中,组件渲染的状态与它的value或者checked相对应.React通 ...
React 之受控组件和非受控组件
在React中,所谓受控组件和非受控组件,是针对表单而言的. 表单受控组件表单元素依赖于状态,表单元素需要默认值实时映射到状态的时候,就是受控组件,这个和双向绑定相似. 受控组件,表单元素的修改会实 ...