Данные Angular6 из ввода в другой компонент

Question

У меня есть компонент, который пишет: Hello Angular6
app.component.html:

<hello name="{{ name }}"></hello>

app.component.ts:

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 6';
}

Задача состоит в том, чтобы создать новый компонент с именем "Userchange"

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

@Component({
  selector: 'app-user-change',
  templateUrl: './userchange.component.html',
  styleUrls: ['./userchange.component.css']
})
export class UserChangeComponent {
  @Input() change: string;  
}

Там у меня есть кнопка и ввод текста типа, он должен работатьвот так: я пишу что-то в поле ввода, затем нажимаю кнопку, и 'name' в app.component должен быть заданным текстом.
не могли бы вы мне помочь с этим?

Я только начал изучать Angular.

Answer 1

Я тоже учусь на английском :). Вот другая версия , вероятно, менее аккуратная, чем предыдущий ответ.

Answer 2

Добро пожаловать в Angular! Есть несколько способов сделать это. Вот один.

Чтобы увидеть, как все это сочетается, вы можете просмотреть этот код в StackBlitz здесь.

В userChange.component.html:

<input type="text" #myTextInput value="DefaultValue"/>
<button (click)="changeName(myTextInput.value)">Click me to change the name</button>

В userChange.component.ts:

nameValue: string;
@Output() nameChange = new EventEmitter();

changeName(val){
   this.name = val;
}

@Input()
  get name() {
    return this.nameValue;
  }

set name(val) {
   this.nameValue = val;
   this.nameChange.emit(this.nameValue);
}

App.Component.html будет использовать двустороннюю привязку данных, что означает, что ваша переменная (в данном случае имя) будет использоваться как в качестве входа и выхода переменной через eventEmitter, чтобы сообщить родителю, что имя имеет изменилось, и действовать соответственно:

<userChange [(name)]="name"></userChange>
Hi {{name}}

Для дальнейшего ознакомления я бы рекомендовал пройтись по туру героев Angular и великолепному посту Мыдрама о Двухстороннем связывании данных.