Angular父子组件传值

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. 引入output 和 EventEmitter 组件
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) {}

3. 声明变量时添加{ static: false }

  @ViewChild('appChildComponent', { static: false }) child: AppChildComponent;

4. 按照如下的方式调用动态组件，在把标签的显示从false转变为true是，调用this.changeDetectorRef.detectChanges()就不会报错了。

show() {
        this.display = true;
        this.changeDetectorRef.detectChanges(); // not required
        console.log(this.contentPlaceholder);
    }