父子传递信息

[deepthan]

1. 父传子： 父组件定义一个需要传递数据的变量

父组件 ts

或者为一个字符串：
public sendData = "我是要传递过去的数据";

父组件 html

<app-demo [getData]="data"></app-demo>

// 这里 [getData]="data" 是直接写 'data'不是 '{{data}}'，也不是willCheckdata="data"

子组件 ts

import { Component,  Input,  OnInit } from '@angular/core';
@Component({
  selector: 'app-Demo',
  ...
})
export class DemoComponent implements OnInit {
    @Input() public getData: string;
    
    ngOnInit(){
        console.log("传递过来的值",this.getData);
    }
}

2. 子传父： 触发父元素事件

子元素 demo.component.ts：

import { Component, OnInit, Output, EventEmitter  } from '@angular/core';

@Component({
  selector: 'app-demo',
  ...
})

export class DemoComponent implements OnInit {

  @Output() sendVal: EventEmitter<any> = new EventEmitter();
  private val : string = '我是要传过去的字符串';
  ngOnInit() {
     this.sendVal.emit(this.val);
  }
  
}

父元素 html

 <app-demo (sendVal)="getVal($event)"></app-demo>

父元素ts

 getVal(value){
     console.log("value",value);
 }