angular父子组件相互传值

一抹微兰 發表於 2019-11-29 17:33:00

<div class="cnblogs_code">
<pre>// 调用子组件向子组件传值和方法的方式 <app-header ="title" ="run" ="this"></app-header></pre>
</div>
在子组件中，引入Input,通过@input() 方式引入，即可通过this.xxx使用
<div class="cnblogs_code">
<pre>import { Component, OnInit, Input } from '@angular/core'; @Component({ selector: 'app-header', templateUrl: './header.component.html', styleUrls: ['./header.component.less'] }) export class HeaderComponent implements OnInit { constructor() { } @Input() title: any; @Input() run: any; @Input() parent: any; ngOnInit() { } getPatrent() { this.run(); this.parent.run(); // 可以直接调用父组件的属性和方法 } }</pre>
</div>
 子组件向父组件间传值
1、通过ViewChild获取子组件的方法和属性 
<div class="cnblogs_code">
<pre>import { Component, OnInit, ViewChild } from '@angular/core';

@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.less']
})
export class HomeComponent implements OnInit {
public title: any = '首页';
@ViewChild('child', {static: false}) child: any;
constructor() { }
ngOnInit() {
}
run() {
alert('父组件');
}
getChildValue() {
this.child.childRun(); // 通过这种方式可以获取到子组件的方法和属性值
}
childFun(e) {
console.log(e);
}
}</pre>
</div>
2、通过事件广播
子组件中引入Output和EventEmitter,再使用@Output定义，通过emit分发
 
<img src="https://img2018.cnblogs.com/i-beta/1631381/201912/1631381-20191203135311228-1499402642.png">
 
 父组件中接收（同vue中的emit）
<img src="https://img2018.cnblogs.com/i-beta/1631381/201912/1631381-20191203135721199-2107201752.png">
 
 
 
 
 
 
 
 
 
 
  
来源：https://www.cnblogs.com/cazj/p/11959189.html

頁: [1]

琼殿技术论坛's Archiver

angular父子组件相互传值