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

Posted 2023-02-23

【中文标题】模板中的Angular 2重复组件引用另一个元素

【英文标题】：Angular 2 duplicate component in template reference another element

【发布时间】：2017-10-19 11:34:25

【问题描述】：

简化我有一个可以在任何模板中多次使用的组件。如何让我的组件 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

【参考方案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>

【讨论】：

似乎不起作用：plnkr.co/edit/hfgbU8MI8uv8KByOW9Qo?p=preview

不抛出解析错误

@PaulThomas <input [type]="input1.showType" value="friend 2 to hide"> 在使用时不要使用#。

【参考方案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;
    

【讨论】：

我喜欢交换我投票支持的代码的方法。然而，真正的关键是要处理要由重复组件处理的非重复元素。

啊，我明白了。在这种情况下，使用模板引用可能是最好的。我会看看我能不能给你一个好的解决方案而不复制这里写的任何其他内容。

@PaulThomas 我添加了另一个解决方案，您可以在其中为您的目标传递模板变量。这应该比上一个解决方案更灵活。是你要找的吗？

是的，新的几乎就是 Amit Chigadani 提供的模板参考。所以也竖起大拇指。

你说得对，那是一回事。我将删除第二个解决方案以反映这一点。

【参考方案3】：

我会做的是

在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>

应用组件

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

  doStuff(inputElement) 
    console.log(inputElement);
  

【讨论】：

Plunker 不工作，或者至少它没有隐藏输入字段？

是的，它只是在控制台上打印输入元素。一旦你在代码中控制了 Input 元素，你就可以做任何你想做的事情。

我只是很困惑，因为是的，你得到了一个句柄，但函数 onClickMe() 最后一行执行“this.type =”hidden”; 但是这似乎没有做任何事情，我本来希望它隐藏输入？

行 "this.type = "hidden"; 存在是因为它在您的第一个 plunkr 中就在那里，我既没有删除它，也没有认为隐藏输入元素对您很重要。无论如何这是plunkr，它可以工作并隐藏输入元素。

完美，我看到你正在通过函数 hasBeenClicked 传递引用，我之前错过了这个。谢谢