angular входные данные, необходимо отправить строку с кнопкой от родительского к дочернему компоненту.

Question

Родительский компонент

<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 и передача текста в переменной Uhellovar` дочернему компоненту, когда я нажимаю btn.

Answer 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.');
}
}