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

Question

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

What can I add to pair them keeping the duplicate component generic and autonomous?

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

我会做的是

在 DuplicateComponent 组件中定义一个输出事件
在 onClickMe() 方法中触发输出事件
通过模板变量为每次出现的 ContainerComponent 模板中的 DuplicateComponent（即包含 DuplicateComponent)
在每次发生时监听新创建的事件 DuplicateComponent 具有传递特定的方法 DuplicateComponent 触发事件的实例
对 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>

AppComponent

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

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

Answer 3

使用转换

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;
    }
}

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

Angular 2 duplicate component in template reference another element

templates

components

generic-programming

typescript

angular