Angular父子组件传值

本文详细介绍了在Angular中如何实现父子组件之间的数据传递。包括父组件向子组件传值,子组件向父组件传值,以及子组件向父组件传递方法或属性。通过使用@Input和@Output装饰器,可以实现双向通信。同时,针对动态组件的特殊情况,文章还给出了相应的解决方案,确保在组件加载延迟的情况下正确通信。
摘要由CSDN通过智能技术生成

1 父组件向子组件传值

1 子组件操作

主要步骤如下:
1. 引入input组件
2. 定义用于接收值的变量,注意这个变量名receive会被放入父组件用用于接收父组件传递过来的值。

// 1 引入接收值的组件input
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

@Component({
  // tslint:disable-next-line: component-selector
  selector: 'icc-audio-upload',
  templateUrl: './icc-audio-upload.component.html',
  styleUrls: ['./icc-audio-upload.component.less'],
})

export class IccAudioUploadComponent implements OnInit {
  constructor() {}
  
  // 2 定义变量用于接收传递过来的值
  @Input() receive: string;
}

2 父组件操作

1 在ts文件中定义被传递的变量

fileName = '我是被传递的值';

2 在html文件绑定

[receive]=fileName 其中fileName是被传递的值,receive是子组件用于接收父组件传递的值的变量

<app-child
	[receive]=fileName
></app-child>

2 子组件向父组件传值

1 子组件操作

主要步骤如下:
1. 引入outputEventEmitter 组件
2. 定义一个变量onSelect并绑定广播事件,变量的值改变的时候,会触发事件,随后向父组件传值。
3. 编辑被传递的值

// 1 引入接收值的组件input EventEmitter
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

@Component({
  // tslint:disable-next-line: component-selector
  selector: 'icc-audio-upload',
  templateUrl: './icc-audio-upload.component.html',
  styleUrls: ['./icc-audio-upload.component.less'],
})

export class IccAudioUploadComponent implements OnInit {
  constructor() {}
  
  // 2 定义事件,向父组件传值
 @Output() onSelect: EventEmitter<any> = new EventEmitter<any>();
// 3 编辑被传递的值
this.audioTime.emit("被传递的值");
}

2 父组件操作

1 在html文件绑定传值事件

(onSelect)=fileName 其中(onSelect)是被传递的事件,fileName是接收被传递的方法。

<app-child
	(onSelect)='fileName($event)'
></app-child>

2 赋值

  selectFile(name: string) {
    this.originFileName = name;
  }

3 子组件向父组件传递方法或属性

1 子组件在ts中的操作

 fileName:string="我是属性";
  select(){
    alert("我是方法")
  }

方案一 父组件在ts中操作

主要步骤如下:
1. 引入ViewChild 组件
2. 引入子组件AppChildComponent
3. 用注解 @ViewChild获取AppChildComponent组件然后赋值给变量child
4. 使用child调用子组件的属性和方法
5. appChildComponent被放在html中是一个选择器,用于标记标签。其形式如下

<icc-audio #appChildComponent ></icc-audio>
// 1 引入接收值的组件input EventEmitter
import { Component, OnInit,ViewChild } from '@angular/core';
// 2 引入子组件
import { AppChildComponent } from './components/app-child.component';
@Component({
  // tslint:disable-next-line: component-selector
  selector: 'icc-audio-upload',
  templateUrl: './icc-audio-upload.component.html',
  styleUrls: ['./icc-audio-upload.component.less'],
})

export class IccAudioUploadComponent implements OnInit {
  constructor() {}
  //3 用注解 @ViewChild获取AppChildComponent组件然后赋值给变量child
   @ViewChild('appChildComponent', { static: false }) child: AppChildComponent;
  //4 把AppChildComponent组件赋值给child变量

  //5 使用变量调用子组件中的属性或方法
  this.child.fileName;
  this.child.select();

}

方案一 的特殊情况

对于动态组件,如果不妥善处置的话会报undifine错误

  1. @viewChild加载是在ngOninit之后的,如果被调用子组件被ngIf包裹,即在最初加载组件的时候没有被加载,然后在某种情况下加载的组件,我们称之为动态组件。我们要做如下变化:
  2. 在构造函数处引入ChangeDetectorRef
constructor(private changeDetector : ChangeDetectorRef) {}
  1. 声明变量时添加{ static: false }
  @ViewChild('appChildComponent', { static: false }) child: AppChildComponent;
  1. 按照如下的方式调用动态组件,在把标签的显示从false转变为true是,调用this.changeDetectorRef.detectChanges()就不会报错了。
show() {
        this.display = true;
        this.changeDetectorRef.detectChanges(); // not required
        console.log(this.contentPlaceholder);
    }
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值