Angular 2指令綁定

我想在自定義指令中綁定「ngFor」索引作爲屬性我做錯了什麼？Angular 2指令綁定

驗證碼：

@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>"): [email protected]:21

來源

2016-01-14 Egor Medvedev

簡單的註釋添加到您的numberOfClicks屬性在你的指令：

@Directive({selector: '[closeWeb]'}) 
class CountClicks { 
    @Input('closeWeb') 
    numberOfClicks = 0; 

    (...) 
}

這樣，您將將numberOfClicks屬性定義爲您的dir的輸入參數並且能夠獲得您在使用指令時提供的價值。

你可以看看angular.io文檔：https://angular.io/docs/ts/latest/guide/attribute-directives.html。請參閱「使用綁定配置指令」一節。

希望它可以幫助你，蒂埃裏

來源

2016-01-14 13:09:58

不幸的是，它並不能幫到我。然後我添加註釋，錯誤消失，但然後我點擊元素，我只有標籤沒有指令'

'。我想獲得'

' –

實際上，該指令實際上是應用的。我的意思是你可以點擊幾次元素。看到這個plunkr：https://plnkr.co/edit/Lm4qnfcAhmTDXpELh6ib?p=preview。爲什麼你需要'closeweb'zttribute仍然存在？ –

工作，非常感謝！這個索引作爲屬性需要我在業務邏輯中的其他功能（我將代碼從Angular 1.4升級到Angular 2）。但是我有一個問題，那麼你在這段代碼中替換'touchstart'到'click'' @HostListener（'touchstart'，['$ event.target']）; touchstart（btn）{console.log（'click ='+ btn +' - '+ this.numberOfClicks）; }' - 你實現click作爲touchstart事件，對吧？ –

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

來源

2016-12-06 09:30:38 chandoo

這個答案增加了沒有價值的問題。問題已經接受了答案，你完全沒有解釋。 – rzelek

Angular 2指令綁定

回答

相關問題