如何将 Angular 2 表单输入传递给打字稿组件?
Posted
技术标签:
【中文标题】如何将 Angular 2 表单输入传递给打字稿组件?【英文标题】:How to pass Angular 2 form input to typescript component? 【发布时间】:2018-01-12 11:03:09 【问题描述】:我是 Angular 2 的新手。我正在寻找一种将表单输入值传递给 ts 组件,以 JSON 字符串形式发送到 spring 控制器的方法。我创建的基本表单如下
person.component.html
<div class="panel-body">
<div class="row">
<div class="col-sm-1"><label class="control-label" for="Name">Full Name:
</label></div>
<div class="col-sm-3">
<input type="text" class="form-control2" placeholder="Full Name"
[(ngModel)]="user.name"></div></div>
<br>
<div class="row">
<div class="col-sm-1"><label class="control-label" for="Email">Email:</label></div>
<div class="col-sm-3">
<input type="text" class="form-control2" [(ngModel)]="user.email">
</div>
</div>
<br>
<div class="col-sm-9">
<button class="btn1" (click)="savePage()"><b>Save</b></button>
<button class="btn1" (click)="resetPage()"><b>Cancel</b></button>
</div> </div>
person.ts
export class Person
constructor(
public name: string,
public email: string,
)
还有什么要做的?
【问题讨论】:
在 Person 类中添加公共属性名称和电子邮件 【参考方案1】:你已经通过了!
[(ngModel)]="user.name"
- 这就是所谓的双向绑定。
现在,在您的打字稿文件中,对象user
填充了您的输入值
现在你需要某种服务,即user.service.ts
,它需要在你的组件提供者中指定。
//组件
@Component(
[...]
providers: [UserService]
)
export class SomeComponent
user: User = new User();
public SomeComponent(private _userService: UserService)
public addUser(): void
this._userService.addUser(this.user).subscribe(res =>
console.log(res); //whatever
);
//服务
public addUser(user: User)
return this.http.post(this.host + this.apiPrefix + '/users/', JSON.stringify(user),
headers: <your headers>)
.map((res: any) =>
return res;
);
【讨论】:
【参考方案2】:如果您使用[(ngModel)]
,您的Person.ts
看起来像这样
export class Person
name: string;
email: string;
然后将其导入person.component.ts
import Person from 'person.ts';
在你的班级内PersonComponent
声明user:Person;
然后像这样在constructor
中调用this.user = new Person();
现在[(ngModel)]
将为您映射数据。
【讨论】:
【参考方案3】:在 TypeScript 中,您可以执行以下操作:
export class Person
name: string;
email: string;
const email = 'some mail';
const name = 'some name';
const person: Person = name: name , email:email
在你的情况下是:
const person: Person = name: user.name, email: user.email
或者只是
const person: Person = user;
最后,您只需要确保属性匹配即可。 例如,如果您有这样的方法:
someMethod(input: Person): void
您可以将您的用户对象作为参数传递:
someMethod(user); <--- this will work;
【讨论】:
以上是关于如何将 Angular 2 表单输入传递给打字稿组件?的主要内容,如果未能解决你的问题,请参考以下文章
Angular 2:仅当表单数据有效时才将表单数据从子级传递给父级