Angular - 事件绑定

这是一个Bootstrap面板。如果用户点击图标，隐藏的部分变得不隐藏，但我需要的是只隐藏那个被点击的部分。Angular - 事件绑定

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

，但没有任何运气..

来源

2017-06-14 J.D.

这是一种很难理解你的要求。你可以创建一个Plunker来演示吗？或者也许添加一个图像来显示行为？ – Askanison4

是点击事件触发你检查控制台日志 – CharanRoot

@Jonnysa - 是的，它确实。绝对检查 –

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

@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() {} 
}

然后在您的标记：

<div class="panel-body" appHideOnClick >

请记住，没有角的每一个元素都有与它相连的hidden属性的造型。您可能需要更改该指令适用display: none的元素风格，还是坚持一个全球性的规则来进行hidden属性在styles.css/styles.scss：

[hidden] { 
    display: none; // may need to be !important 
}

来源

2017-06-14 16:17:17 joh04667

Angular - 事件绑定

回答

相关问题