组件传递
我们在父组件中倒入子组件 直接写上子组件的名称即可
<app-my-name></app-my-name>
|
父组件向子组件传递数据
父组件中 定义数据然后进行传递
<app-my-name [itemData]="data"></app-my-name>
|
这样直接传递是不可以的
我们需要在子组件中 使用 @input
装饰器 进行先行定义然后才可以进行接收
// 子组件中导入 input import { Component, OnInit ,Input} from '@angular/core';
|
然后定义接收的变量名称
export class MyNameComponent implements OnInit { @Input() item: any; constructor() { } ngOnInit(): void { } }
|
然后我们可以直接在子组件页面中进行渲染
<p>my-name works!</p> <p>父组件传递:{{item}}</p>
|
子组件向父组件传递数据
子组件
我们需要在子组件中引入自定义事件Output
EventEmitter
import { Component, OnInit ,Output,EventEmitter} from '@angular/core';
|
然后我们实例化一个事件对象
@Output() childMsg = new EventEmitter()
|
我们在子组件中定义一个按钮并给个事件
<button (click)="clickBtn()">子向父传递数据</button>
|
然后我们在这个clickBtn
事件中调用我们创建的自定义事件
clickBtn() { this.childMsg.emit({ url: '79bk.cn' }) }
|
父组件
我们需要在父组件中进行监听这个自定义事件来接收数据
<app-my-name (childMsg)="getData($event)"></app-my-name>
|
childMsg
: 子组件中自定义的事件
getData
:需要我们在父组件中进行定义的事件来接收传递过来的变量
getData(event: any) { console.log(event) }
|