模板中的Angular 2重复组件引用另一个元素

Question

简化我有一个可以在任何模板中多次使用的组件。如何让我的组件 click-me 与其下方的输入元素配对，以便在触发事件（在本例中为单击）时应用（在本例中将输入类型更改为隐藏）到那个输入。显然，方法在这里很重要，而不是隐藏！

我可以添加什么来配对它们以保持重复组件的通用性和自主性？

import {Component} from 'angular2/core';

@Component({
    selector: 'click-me',
    template: `<button (click)="onClickMe()">Hide A Friend Input</button>`
})

组件

export class DuplicateComponent {
    onClickMe() {
        alert("try change type");
        this.type = "hidden";
    }
}

模板

<div>
  <click-me></click-me>
  <input type="input" value="friend 2 to hide" id="clickme1">
</div>

<div>
  <click-me></click-me>
  <input type="input" value="friend 2 to hide" id="clickme2">
</div>

Click here for Plunker

Answer 1

利用Template references #click1 和#click2 以便您可以控制您的组件。

    <div>
      <click-me #click1></click-me>
      <input type="input" value="friend 2 to hide" id="clickme1" [hidden] = "click1.type">
    </div>

    <div>
      <click-me #click2></click-me>
      <input type="input" value="friend 2 to hide" id="clickme2" [hidden] = "click2.type">
    </div>

Answer 2

使用 Translusion

Demonstration

我认为制作这个组件的最好方法是在复制组件中嵌入你想要的任何内容。

然后在副本组件中，您可以将转入的内容存储在 span 标签内，以便保留样式。然后添加一个点击处理程序来切换 span 标签的隐藏。

请注意，您不仅可以将其用于输入元素，还可以将其用于其他组件，只需将它们包装在副本组件中即可。

// app.component.html

// app.component.html
<click-me>
  <input type="input" value="friend 1 to hide" id="clickme2">
</click-me>

<click-me>
  <input type="input" value="friend 2 to hide" id="clickme2">
</click-me>

<click-me>
  <input type="input" value="friend 3 to hide" id="clickme2">
</click-me>

// duplicate.component.ts
import {Component} from 'angular2/core';

@Component({
    selector: 'click-me',
    template: `
      <button (click)="onClickMe()">Hide A Friend Input</button>
      <span [hidden]="hidden">
        <ng-content></ng-content>
      </span>
    `
})

export class DuplicateComponent {
    hidden = false;

    onClickMe() {
        this.hidden = !this.hidden;
    }
}

Answer 3

我会做的是

1. 在DuplicateComponent组件中定义一个输出事件
2. 在onClickMe() 方法中触发输出事件
3. 通过模板变量定义每次出现的特定名称 ContainerComponent 的模板中的 DuplicateComponent（即 包含DuplicateComponent实例的组件
4. 在每次出现时监听新创建的事件 DuplicateComponent 带有通过特定方法的方法 DuplicateComponent 触发事件的实例
5. 使用 DuplicateComponent 实例执行所需的操作 作为新创建事件的侦听器附加的方法

听起来可能很复杂，但我认为代码很简单（参见working plunkr）

复制组件

import {Component, Output, EventEmitter} from 'angular2/core';
@Component({
    selector: 'click-me',
    template: `<button (click)="onClickMe()">Hide A Friend Input</button>`
})
export class DuplicateComponent {
  @Output() haveBeenClicked = new EventEmitter<any>();
    onClickMe() {
        this.haveBeenClicked.next();
        this.type = "hidden";
    }
}

AppComponent 模板

<div>
  <click-me (haveBeenClicked)="doStuff(two)"></click-me>
  <input type="input" value="friend 2 to hide" id="clickme2" #two>
</div>

应用组件

@Component({
    selector: 'my-app',
    templateUrl: 'app/app.component.html',
    directives: [DuplicateComponent]
})
export class AppComponent {
  constructor AppComponent {}

  doStuff(inputElement) {
    console.log(inputElement);
  }
}