在Angular 2中,可以通过使用事件绑定和双向数据绑定来实现将文本框的输入添加到一个span中的功能。以下是一个示例代码,演示了如何实现这个功能:
{{ spanText }}
// app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
inputText: string;
spanText: string;
addToSpan() {
this.spanText = this.inputText;
}
}
在这个示例中,我们首先在模板中创建了一个文本框和一个按钮。文本框通过双向数据绑定 [(ngModel)]
与组件中的 inputText
属性关联起来,这意味着文本框的输入将自动更新为 inputText
的值,同时 inputText
的值也会随着文本框的输入而更新。
按钮通过 (click)
事件绑定到组件中的 addToSpan()
方法。当按钮被点击时,addToSpan()
方法会将 inputText
的值赋给 spanText
属性。
最后,我们在模板中使用 {{ spanText }}
将 spanText
的值显示在一个元素中。
通过这种方式,当用户在文本框中输入内容并点击按钮时,输入的文本将会被添加到元素中显示出来。