Question

我有一个组件，其中写道：Hello Angular6
app.component.html：

base R

app.component.ts：

dplyr

任务是制作一个名为relist

的新组件

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

我有一个按钮和一个文本类型输入，它应该像这样工作：在输入框中写一些东西，然后按下按钮，并在app.component中输入import { Component } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ] }) export class AppComponent { name = 'Angular 6'; }文字。
你能帮我吗？

我刚刚开始学习Angular。

Answer 1

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

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

在userChange.component.html中：

DeleteAttributes = [attr in AttributeList if not attr in ExceptionList]

在userChange.component.ts中：

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

App.Component.html将使用双向数据绑定，这意味着您的变量（在本例中为名称）将通过eventEmitter用作变量输入和输出，以向父级发信号通知该名称具有更改并采取相应措施：

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);
}

作为进一步参考，我建议您浏览Angular的英雄之旅和Thoughtram在Two-way Data Binding.上的精彩文章

Answer 2

我也在学习有角的:)。这是another version，可能不如上一个答案那么整洁。

从输入到其他组件的Angular6数据

2 个答案: