Angular6 数据从输入到其他组件

Question

我有一个组件，上面写着：你好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;  
}

我有一个按钮和一个文本输入框，它应该是这样工作的：我在输入框中写了一些东西，然后我按下按钮，app.component 中的 'name'应该是给定的文本。
你能帮我吗？

刚开始学习Angular.

Answer 1

欢迎来到Angular！有几种方法可以做到这一点。这是一个。

要了解它们是如何组合在一起的，您可以在 StackBlitz 中查看此代码 here.

在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}}

为了进一步参考，我建议您在 Two-way Data Binding.

上浏览 Angular 的英雄之旅和 thoughtram 的优秀作品 post

Answer 2

我也在学习angular :)。这是 another version，可能没有以前的答案那么整洁。

Angular6 数据从输入到其他组件

Angular6 Data from Input to other component

html

angular

angular6