向 Angular 组件发送点击事件

Question

我创建了一个如下所示的组件：

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {

  constructor() { }

  @Input() text: string
  @Input() imgSrc: string
  @Input() reveal: boolean

  ngOnInit() {
  }    

}

此组件的 HTML 是：

<span class="my-span" [ngClass]="reveal ? 'is-active' : '' ">
  {{ text }}
  <img src="{{ imgSrc }}" alt="">
</span>

和CSS：

.my-span {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;

  img {
    max-width: 200px;
    object-fit: contain;
    pointer-events: none;
    opacity: 0;
  }

  &.is-active {

    img {
      pointer-events: all;
      opacity: 1;
    }
  }
}

我想做的事情的基本想法是使用像这样的组件：

<my-component (click)="clickTest= !clickTest" reveal="clickTest" text="some text" imgSrc="images/my-image.jpeg"></my-component>

因此，通过单击我放置的组件，它应该通过一些布尔值 (on/off) 进行切换，这会激活组件中的 is-active class，即显示本例中的图像。

text 和 imgSrc 部分有效，但点击无效。首先，在我看来，我必须在我希望该组件出现的页面上为每个它创建一个新的布尔变量是没有意义的。这否定了我脑海中组件的想法，因为布尔值应该与组件一起使用，而不是组件被调用的地方（可能是几个地方）。

所以我想我只需要以某种方式检查组件何时被单击，然后将此单击事件发送到组件，然后组件可以将其转换为 on/off 信号。

但是我不太清楚如何实现这个？

Answer 1

html:

<span class="my-span" (click)="toggleReveal()" [class.is-active]="reveal">
  {{ text }}
  <img src="{{ imgSrc }}" alt="">
</span>

ts:

@Input() text: string
@Input() imgSrc: string
reveal = false

toggleReveal() {
  this.reveal = !this.reveal
}

html 对于 parent:

<my-component text="some text" imgSrc="images/my-image.jpeg"></my-component>

您不需要 parent 上的点击处理程序 - 点击在 child 组件中处理。

您可以将布尔值 reveal 传递给 child 组件，但您需要这样做吗？如果是这样，只需传入 reveal 布尔值并在 child 中将 reveal 声明为 @Input。如果 false 总是有利于初始化，那么根本不需要传入它。

向 Angular 组件发送点击事件

Send click event to Angular component

components

angular