Question

请考虑以下情形。我想使用三个NameInputComponent，每个FullNamesComponent包装一个文本输入，以构建NameInputComponent：

两个firstName1个，用于一对单独的名字（firstName2＆amp; NameInputComponent）
一个sharedLastName，用于共享的姓氏（fullName1 = firstName1 + ' ' + sharedLastName）

FullNamesComponent应该公开两个全名：

fullName2 = firstName2 + ' ' + sharedLastName
ngModel

将这些组件链接在一起的正确方法是什么？我尝试过使用NameInputComponent，这允许我将输入的值绑定到EventEmitter中的变量，但我不知道如何继续构建，所以我可以做在父组件中具有这些值的东西。根据我的理解，我需要使用import {Component} from 'angular2/core'; @Component({ selector: 'name-input', template: ` <h2>{{inputValue}}</h2> <input type="text" [(ngModel)]="inputValue"> ` }) export class NameInputComponent { inputValue: string; // <= How do I detect changes to this? }来从父母那里获取价值，但我不知道如何解决这个问题。

我应该注意，这并没有被用作提交的表格。我希望绑定到输出并将它们用于页面的其他部分，以及能够以编程方式/通过绑定到页面的其他部分来更改输入的内容。

这是我到目前为止所做的：

名-input.component.ts

import {Component} from 'angular2/core';

@Component({
  selector: 'full-names',
  template: `
    {{fullName1}} &amp; {{fullName2}}
    <name-input #firstName1></name-input>
    <name-input #firstName2></name-input>
    <name-input #sharedLastName></name-input>
  `,
  directives: [
    NameInputComponent
  ],
  providers: [
    NameInputComponent
  ]
})
export class FullNamesComponent {
  fullName1: string; // No idea how to link these
  fullName2: string; // to values in components above
}

全names.component.ts

  protected void Button1_Click(object sender, EventArgs e)
    {
        var client = new RestClient("http://api.meaningcloud.com/class-1.1");
        var request = new RestRequest(Method.POST);
        request.AddHeader("content-type", "application/x-www-form-urlencoded");
        request.AddParameter("application/x-www-form-urlencoded", "key=MY_KEY_VALUE1b&txt=PRUEBA&model=IPTC_es", ParameterType.RequestBody);
        IRestResponse response = client.Execute(request);
        txtRespuesta.Text = response.Content;
    }

Answer 1

我会考虑这样的事情。

假设您希望 FullNamesComponent 收听 NameInputComponent

上的事件（更改）

import {Component, EventEmitter} from 'angular2/core';

@Component({
  selector: 'name-input',
  template: `
    <h2>{{inputValue}}</h2>
    <input type="text" [(ngModel)]="inputValue" ()="nameChanged.emit($event.target.value)">
  `,
  outputs: ['nameChanged']
})
export class NameInputComponent {
  inputValue: string; // <= How do I detect changes to this?
  nameChanged = new EventEmitter<string>();
}

然后 FullNamesComponent 类似于

import {Component} from 'angular2/core';

@Component({
  selector: 'full-names',
  template: `
    {{fullName1}} &amp; {{fullName2}}
    <name-input #firstName1 (nameChanged)="firstName1Changed($event)"></name-input>
    <name-input #firstName2 (nameChanged)="firstName2Changed($event)"></name-input>
    <name-input #sharedLastName (nameChanged)="sharedLastNameChanged($event)"></name-input>
  `,
  directives: [
    NameInputComponent
  ],
  providers: [
    NameInputComponent
  ]
})
export class FullNamesComponent {
  firstName1: string; 
  firstName2: string; 
  sharedLastName: string;

  firstName1Changed(inName: string) {
     this.fullName1 = inName;
     // do something
  }
  firstName2Changed(inName: string) {
     this.fullName2 = inName;
     // do something
  }
  sharedLastNameChanged(inName: string) {
     this.sharedLastName = inName;
     // do something
  }
}

最后，我认为您不需要在 FullNamesComponent 中指定providers: [NameInputComponent]，因为NameInputComponent是您在FullNamesComponent模板中使用的指令，并且不是DependencyInjection机制的一部分。< / p>

我希望我理解你的观点，这有助于

Angular2组件连接多个输入组件

名-input.component.ts

全names.component.ts

1 个答案: