Question

这是一个Bootstrap面板。如果用户点击图标，隐藏的部分将被取消隐藏，但我需要的是仅取消隐藏被点击的部分。

   @Component({
      template: `
        <div class="panel panel-default">
          <div class="panel-heading" *ngFor="let fizz of fizzes">
            <div class="row">
              <div class="col-md-2">
                <i class="glyphicon {{ fizz.iconClass }}"></i>
              </div>
              <div class="col-md-8">
                {{ fizz.heading }}
              </div>
              <div class="col-md-2">
                <i class="glyphicon glyphicon-menu-down clickable" (click)="onClick()"></i>
              </div>
            </div>
          </div>
          <div class="panel-body" [hidden]="!clicked">
            {{ fizz.content }}
          </div>
        </div>
      `
    })

    export class FizzComponent {
      fizzes: object[];
      clicked = false;

      onClick(event: any) {
        this.clicked = !this.clicked;
      }
    }

我可以通过自己定义每个动作来实现它，但是我如何以更通用的方式做到这一点？

试图通过$event，如下：

<i class="glyphicon glyphicon-menu-down clickable" (click)="onClick($event)"></i>

和

  onClick(event: any) {
    event.target.clicked = !event.target.clicked;
  }

但没有任何运气..

Answer 1

如果您正在寻找一个通用的，可重复使用的解决方案，只需编写一个指令来执行您的要求。然后，您只需要在适当的模块中声明它并将其添加到元素上。

ImapClient does not contain a definition for 'AuthMethods'

然后在你的标记中：

@Directive({
    selector: '[appHideOnClick]'
})
export class HideOnClickDirective {



    @HostListener('click') onClick() {
        // toggle hidden on clicked
        this.isHidden = !this.isHidden;
    }

    @HostBinding('hidden') isHidden = false; // initialize without hidden attribute 

    constructor() {}
}

请记住，并非Angular中的每个元素都附加了<div class="panel-body" appHideOnClick >属性样式。您可能需要更改指令以将hidden应用于元素样式，或者在display: none中为hidden属性添加全局规则：

styles.css/styles.scss

角度 - 事件绑定

1 个答案: