模板中的角度2重複組件引用另一個元素

Question

簡化我有一個組件可以在任何模板中多次使用。如何讓我的組件點擊我與它下面的輸入元素配對，因此當事件（點擊此例中）被觸發時，它將應用（將輸入類型更改爲在此情況下隱藏）到該輸入。顯然這種方法在這裏並不重要！

我可以添加哪些配對來保持重複組件的一般性和自主性？

import {Component} from 'angular2/core'; 

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

COMPONENT

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

TEMPLATE

<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

什麼，我會做的是

1. 在DuplicateComponent組件定義輸出事件
2. 消防輸出事件whithin的onClickMe()方法
3. 通過模板變量定義一個特定的名稱每次出現 DuplicateComponent在ContainerComponent（即 其中包含DuplicateComponent實例）
4. 聽在 DuplicateComponent與經過特殊 DuplicateComponent實例，它已觸發事件
5. 做什麼是需要用一個方法的每次出現新創建的事件的組件在 方法中DuplicateComponent例如附於新創建的事件

這可能聽起來複雜的監聽器，但我覺得代碼非常簡單（見working plunkr）

DuplicateComponent

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 2

利用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 3

使用Translusion

Demonstration

我想使這個組件的最佳方式是transclude任何你想要重複的組件中。

然後在重複組件中，您可以將跨行內容存儲在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; 
    } 
}