使用ngFor-Angular2处理自定义指令

昨天我试着玩一个这样的问题，在我的解决方案中遇到了问题

在组件的模板中，我使用ngFor指令，在该指令中我使用自定义的

popover

指令仅通过指令，我想显示每个ngFor对象的隐藏内容

一旦你检查了，你就会意识到我的问题

在指令中使用的

mouseenter

事件上，我想显示相应

ngFor

对象的内容

指令.ts

import {Input,Component,Output,EventEmitter,Input,Directive,Hostbinding} from 'angular2/core';
import {Component, Input, OnInit, OnChanges, ChangeDetectionStrategy, ElementRef} from 'angular2/core';
@Directive({
    selector: '.tower-details',
    host:{
      '(mouseenter)':'show($event)',
      '(mouseout)':'hide()'
    }
})
export class popover{
   @Input() value: string;
   @Output() valueChange=new EventEmitter();


   ngOnChanges(...args:any[]){
     //console.log(args[0].value);
   }
   show(val)
   {
     console.log(val.target);
     this.valueChange.emit(true);
   }
   hide()
   {
     console.log('hide');
     this.valueChange.emit(false);
   }

}

 template: `
    <div  *ngFor="#p of popovers;#index=index">
            <div class="tower-details"  [(value)]="show" style="display: block;border:1px solid green;background-color:orange" >
             Hover Me ! {{index}}
                <div *ngIf="show">
                <div class="popover top" style="display: block;border:1px solid green">
                    <h3 class="popover-title">{{p.title}}</h3>
                    <div class="popover-content">pop up content</div>
                </div>
                </div>
            </div>
            <br>
            <br>
     </div>
  `

应用程序ts

import {Input,Component,Output,EventEmitter,Input,Directive,Hostbinding} from 'angular2/core';
import {Component, Input, OnInit, OnChanges, ChangeDetectionStrategy, ElementRef} from 'angular2/core';
@Directive({
    selector: '.tower-details',
    host:{
      '(mouseenter)':'show($event)',
      '(mouseout)':'hide()'
    }
})
export class popover{
   @Input() value: string;
   @Output() valueChange=new EventEmitter();


   ngOnChanges(...args:any[]){
     //console.log(args[0].value);
   }
   show(val)
   {
     console.log(val.target);
     this.valueChange.emit(true);
   }
   hide()
   {
     console.log('hide');
     this.valueChange.emit(false);
   }

}

 template: `
    <div  *ngFor="#p of popovers;#index=index">
            <div class="tower-details"  [(value)]="show" style="display: block;border:1px solid green;background-color:orange" >
             Hover Me ! {{index}}
                <div *ngIf="show">
                <div class="popover top" style="display: block;border:1px solid green">
                    <h3 class="popover-title">{{p.title}}</h3>
                    <div class="popover-content">pop up content</div>
                </div>
                </div>
            </div>
            <br>
            <br>
     </div>
  `

模板：`
让我停下来！{{index}}
{{p.title}}
弹出内容




`

我想你想要的是

@组件({
选择器：“我的应用程序”，
提供者：[]，
模板：`
让我停下来！{index}
{{p.title}}
弹出内容




`,
指令：[popover]
})
导出类应用程序{
popovers=[{“标题”：“popover1”}，{“标题”：“popover2”}，{“名称”：“标题”}]
show={'popover1'：false，'popover2'：false，'title'：false}；
}

每个项目的状态需要单独存储。如果对每个对象使用相同的值，则它们将显示/隐藏同步

由于您在

[（value）]=“show”

上使用双向绑定，因此每个项目的值都将传播到

应用程序，并返回到每个
塔的详细信息


更新

您可以导出如下指令：

@指令({
选择器：'.tower details'，
主持人:{
“（mouseenter）”：“show（$event）”，
“（mouseout）”隐藏（）
},
exportAs:“塔”
})
出口级popover{

然后可以创建一个模板变量来引用指令中的值


让我停下来！{index}-{{tower.value}

您还需要在指令中设置
值
，而不仅仅是发出一个事件。事实上，发出一个事件不再是必需的，除非您想通过其他方式绑定

show（val）
{
console.log（val.target）；
this.value=true；
this.valueChange.emit（true）；
}
隐藏（）
{
console.log（'hide'）；
this.value=false；
this.valueChange.emit（false）；
}

事实上，您使用的
show
变量是全局变量。您应该这样使用：

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div *ngFor="#p of popovers;#index=index">
        <div class="tower-details" (valueChange)="show[index]=$event" style="display: block;border:1px solid green;background-color:orange" >
         Hover Me ! {{index}}
            <div *ngIf="show[index]">
            <div class="popover top" style="display: block;border:1px solid green">
                <h3 class="popover-title">{{p.title}}</h3>
                <div class="popover-content">pop up content</div>
            </div>
            </div>
        </div>
        <br>
        <br>
  </div>
  {{show | json }}
`,
directives: [popover]
})
export class App {
  popovers=[{"title":"popover1"},{"title":"popover2"}, {"name":"title"}]
  show=[false,false,false];
}

在组件中是这样的：

@Component({
  selector: 'my-app',
  template: `
    <div  *ngFor="#p of popovers;#index=index">
        <div class="tower-details" #dir="popover" style="display: block;border:1px solid green;background-color:orange" >
         Hover Me ! {{index}}
            <div *ngIf="dir.shoudShow">
            <div class="popover top" style="display: block;border:1px solid green">
                <h3 class="popover-title">{{p.title}}</h3>
                <div class="popover-content">pop up content</div>
            </div>
            </div>
        </div>
        <br>
        <br>
   </div>
  `,
  directives: [popover]
})
export class App {
  popovers=[{"title":"popover1"},{"title":"popover2"}, {"name":"title"}]
}

@组件({
选择器：“我的应用程序”，
模板：`
让我停下来！{index}
{{p.title}}
弹出内容




`,
指令：[popover]
})
导出类应用程序{
popovers=[{“标题”：“popover1”}，{“标题”：“popover2”}，{“名称”：“标题”}]
}

看看这个新的plunkr:。
Gunter，如果你没有这样的布尔属性，但你仍然只想通过指令来处理它，那该怎么办。在这里，你知道你有三个对象，所以你想出了三个对象。但实际上，如果数组中有上千个对象，那该怎么办呢。你不能这样做。对吗？我想要一些动态的方法。例如，使用
index
，如果我们可以使用指令对其进行处理。你可以像我的第一种方法那样对任意数量的元素进行处理，只需要对代码进行一些小的更改。我想你还是会更喜欢我的第二种方法。我想第二种方法比1种好得多。简直太棒了！这里你知道你有三个对象，所以哟u提出了三个对象。但实际上，如果数组中有上千个对象，该怎么办？你不能这样做。对吗？我想要一些动态的方法。例如，使用
索引
，如果我们可以使用指令来处理它。事实上，数组当然可以动态创建。我想到了另一个解决方案；-）我更新了我的答案令人担忧的是。。。