角度输入输出，需要将带有按钮的字符串从父组件发送到子组件请答案

【问题标题】：angular input output,need to send string with button from parent to child component Please角度输入输出，需要将带有按钮的字符串从父组件发送到子组件请
【发布时间】：2020-07-23 08:16:08
【问题描述】：

父组件

<h2 class="form-group-lg">Parent Component</h2>
<button class="btn-warning" (click)="btnFunc()">Send Massage To Child</button>
<hr>
<app-child [state]="helloVar"></app-child>
<h1></h1>

import {Component} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  helloVar = 'Hello Child';

  btnFunc() {
    const hello = this.helloVar;
    console.log(hello);   **cant log this massage with button in** child component
  }
}

子组件

<h2 class="form-group-lg">Child Component</h2>
<button class="btn-warning">Send Massage To Parent!</button>
<p>{{state}}</p>

import {Component, Input} from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.scss']
})
export class ChildComponent {
  @Input() public state: string;  
}

我想点击按钮方法调用btnfunc，并在点击btn时将变量Uhellovar`中的文本传输到子组件。

【问题讨论】：

标签： angular

【解决方案1】：

[state]="helloVar" 将变量向下发送到子组件。要进行交流，您必须使用EventEmitter。

试试这个：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  helloVar = 'Hello Child';

  btnFunc(){
    const hello = this.helloVar;
    console.log(hello);   **cant log this massage with button in** child component
  }

  // new BtnFunc gets called every time child button is clicked
  newBtnFunc(stringFromChild: string) {
    console.log(stringFromChild);
  }
}


<h2 class="form-group-lg">Parent Component</h2>
<button class="btn-warning" (click)="btnFunc()">Send Massage To Child</button>
<hr>
<app-child 
  [state]="helloVar"
  // wire up sendMessageToParent event to newBtnFunc
  (sendMessageToParent)="newBtnFunc($event)"
></app-child>
<h1></h1>

**child component**
<h2 class="form-group-lg">Child Component</h2>
// put click on this button to call onButtonClick when clicked
<button (click)="onButtonClick()" class="btn-warning">Send Massage To Parent!</button>
<p>{{state}}</p>


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


@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.scss']
})


export class ChildComponent  {
@Input() public state: string;
@Output() sendMessageToParent = new EventEmitter<string>();

onButtonClick() {
  // emit to parent to tell them that this button was clicked
  this.sendMessageToParent.emit('This message will be sent up to parent.');
}
}

【讨论】：