Question

我想绑定＆＃34; ngFor＆＃34;自定义指令中的索引作为属性我做错了什么？

此代码：

@Directive({selector: '[closeWeb]'})
class CountClicks {
    numberOfClicks = 0;
    @HostListener('touchstart', ['$event.target'])
    touchstart(btn) {
        console.log(btn)
    }
}

@Component({
    selector: 'wrap',
    template: `
        <div class="wrap">
            <div class="item" *ngFor="#webviews of webviewsCount; #i = index">

                <!-- I want to bind index in custom directive as attribute -->
                <div [closeWeb]="i">{{i}}</div>

            </div>
        </div>
    `,
    directives: [CountClicks]
})

export class Wrap {}

我收到了这个错误：

EXCEPTION: Template parse errors:
Can't bind to 'closeWeb' since it isn't a known native property ("</div><div [ERROR ->][closeWeb]="i">{{i}}</div></div></div>"): Wrap@9:21

Answer 1

只需将注释添加到指令中的map属性：

numberOfClicks

这样您就可以将@Directive({selector: '[closeWeb]'}) class CountClicks { @Input('closeWeb') numberOfClicks = 0; (...) }属性定义为指令的输入参数，并且能够获得使用该指令时提供的值。

您可以查看angular.io文档：https://angular.io/docs/ts/latest/guide/attribute-directives.html。请参阅＆＃34;使用绑定配置指令＆＃34;。

希望它可以帮到你，亨利

Answer 2

import {Component,Directive,Input,HostListener} from 'angular2/core';

@Directive({selector: 'closeWeb'})
class CountClicks {
    @Input('closeWeb2')
    numberOfClicks = 0;
    @HostListener('click', ['$event.target'])
    touchstart(btn) {
        console.log('click = '+btn+' - '+this.numberOfClicks); 
    }
}

@Component({
    selector: 'wrap',
    template: `
        <div class="wrap">
            webviewsCount : {{webviewsCount | json}}<br/> 
            <div class="item" *ngFor="#webviews of webviewsCount; #i = index">

                <!-- I want to bind index in custom directive as attribute -->
                <div style="widhth:30px; height: 30px; border: solid 1px black"
                     ><closeWeb [closeWeb2]="i">{{i}}</closeWeb>{{i}}</div>

            </div>
        </div>
    `,
    directives: [CountClicks]
})

export class Wrap {
  constructor() {
    this.webviewsCount = [
      { value: 1 },
      { value: 2 },
      { value: 3 }
    ];
  }
}

Angular 2指令绑定

2 个答案: