如何将 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:仅当表单数据有效时才将表单数据从子级传递给父级

如何获取 Angular 输入指令数据以传递给控制器

将 Angular Reactive FormControls 传递给子组件

Angular5:将变量从一个组件传递到另一个打字稿文件

如何将多个变量传递给 Angular 2 中的组件?

在 Angular 8 中,如何将一个组件传递给另一个组件的输入,然后在路由器模块中强制使用它