angular组件之间的通信
2024-10-07 22:47:12
一、组件创建
直接使用 ng g component 的命令创建组件，会自动生成组件所需的文件，方便快捷。
// 父组件
ng g component parent
// 子组件
ng g component parent/child
二、了解@Input和@Output()
@Input：将父作用域中的值“输入”到子作用域中，之后子作用域进行相关处理
@Output：子作用域触发事件执行响应函数，而响应函数方法体则位于父作用域中，相当于将事件“输出”到父作用域中，在父作用域中处理。Output一般都是一个EventEmitter的实例，使用实例的emit方法将参数emit到父组件中，触发父组件中对应的事件。
三、父组件向子组件传值（@input()）
使用 @Input() 让子组件知道哪个是输入的属性，对应vue中的props。
父组件：
//parent.component.html
<div class="parent-style">
<h1>我是父组件</h1>
<app-child [sendMsg]="msg"></app-child> //sendMsg任意命名
</div> //parent.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-parent',
templateUrl: './parent.component.html',
styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {
public msg:string = '我是父组件传递过来的数据'; //需要传递的数据
constructor() { }
ngOnInit() {
}
}
子组件：
//child.component.html
<div class="child-style">
<h3>我是子组件</h3>
<p>{{sendMsg}}</p> //查看页面数据是否显示？
</div>
//child.component.ts
import { Component, OnInit ,Input} from '@angular/core'; //引入Input
@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
@Input() sendMsg:string; //告诉组件，sendMsg是父组件传进来的数据
constructor() { }
ngOnInit() {
}
}
四、子组件向父组件传值（@Output()）
子组件：
//child.component.html
<div class="child-style">
<button type="button" (click)="send()">点击触发</button>
</div>
//child.component.ts
import { Component, OnInit ,Output,EventEmitter} from '@angular/core';//引入Output @Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
@Output() private outer = new EventEmitter(); //输出属性，需要定义成事件
public info = "子组件消息";
constructor() { } ngOnInit() {
}
send(){
this.outer.emit(this.info);//通过emit将信息发射出去
}
}
父组件：
//parent.component.html
<div class="parent-style">
<app-child (outer)="getData($event)"></app-child>//事件绑定获取数据
<p>{{msg}}</p>
</div>
//parent.component.ts
import { Component, OnInit } from '@angular/core'; @Component({
selector: 'app-parent',
templateUrl: './parent.component.html',
styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {
msg:string;
constructor() { } ngOnInit() {
}
getData(data){
this.msg = data;
}
}
最新文章
- nginx缓存设置proxy_cache
- 虚拟机通过NAT方式与主机、互联网通信
- 响应式HTML5+CSS3 网站开发测试实践
- 黄聪：Discuz!的SEO优化策略一：如何设置标题 & 如何去掉Powered by Discuz!尾巴
- C语言 将产生的随机数存入数组，数据不能相同
- hdu 4259 Double Dealing
- C++拾遗（九）类与动态内存分配(1)
- javascript中对象的不同创建方法
- Linux如何让进程在后台运行的三种方法详解
- Java导出CSV文件
- 20172328 2018-2019《Java软件结构与数据结构》第三周学习总结
- 第五次编程作业-Regularized Linear Regression and Bias v.s. Variance
- PS中如何把图片颜色加到字体上去
- 转）nodejs后台启动方式PM2
- MVC 访问静态页面 View 下面放JS
- Python 脚本利用adb 进行手机控制
- codevs 1013 求先序排列
- Android数据库安全解决方案，使用SQLCipher
- css冻结列的效果
- docker 参数