角度指令

Question

サンプルを作成した人は@Directiveデコレータを使用していますか？私は多くのことを探しましたが、これまでのすべての開発者がコンポーネントディレクティブを作成しました。たとえ Angular API Reviewでさえこれについてもっと話していません。

Answer 1

Simple-Directive-Demo。 これは、angle2指令で始めるのは非常に簡単な例です。

私はコンポーネントとディレクティブを持っています。

私はディレクティブを使用してコンポーネントのビューを更新します。さらにディレクティブのchangeColor関数がコンポーネントのchangeColor関数で呼び出されています。

コンポーネント

@Component({ 
    selector: 'my-app', 
    host: {'[style.backgroundColor]':'color',} 
    template: ` 
     <input type="text" [(ngModel)]="color" (blur)="changeColor(color)" /> 
     <br> 
     <span > (span) I'm {{color}} color <span> 
     <div mySelectedColor [selectedColor]="color"> (div) I'm {{color}} color </div> 
    `, 
    directives: [selectedColorDirective] 
}) 

export class AppComponent implements AfterViewInit{ 
    @ViewChild(selectedColorDirective) myDirective: selectedColorDirective; 
    color:string; 
    constructor(el:ElementRef,renderer:Renderer) { 
    this.color="Yellow"; 
    //renderer.setElementStyle(el, 'backgroundColor', this.color); 
    } 
    changeColor(color) 
    { 
    this.myDirective.changeColor(this.color); 
    } 
    ngAfterViewInit() { } 
} 

指令

@Directive({ 

    selector:"[mySelectedColor]", 
    host: { 
    // '(keyup)': 'changeColor()', 
    // '[style.color]': 'selectedColor', 
    } 

    }) 

    export class selectedColorDirective { 

    @Input() selectedColor: string = ''; 

    constructor(el: ElementRef, renderer: Renderer) { 
     this.el=el; 
     this.el.nativeElement.style.backgroundColor = 'pink'; 
     // renderer.setElementStyle(el, 'backgroundColor', this.selectedColor); 
    } 

    changeColor(clr) 
    { 
    console.log('changeColor called ' + clr); 
    //console.log(this.el.nativeElement); 
    this.el.nativeElement.style.backgroundColor = clr; 
    } 

} 

Answer 2

角度指令の3種類があります

Components 
Attribute directives 
Structural directives 

は、

Angular2ガイド属性のディレクティブコード：https://github.com/guyoung/GyPractice-Angular2/tree/master/apps/attribute-directives

Angular2ガイド構造ディレクティブコード：簡単に言えばhttps://github.com/guyoung/GyPractice-Angular2/tree/master/apps/structural-directives

Answer 3

コンポーネント指令アプリを構築しながら、我々は多くを使用したテンプレートを使用してディレクティブになります - >あなたのhtmlでの - ><custom-tag></custom-tag>

@Component({ 
selector : 'custom-tag', 
template : '<p> My Custom Tag</p>' 
}) 

構造指令追加要素を削除することによって、DOMを変更する要素を再作成します。 例は、それがfalseに変更された場合、他の真は削除する場合ngIfはdiv要素を追加することになり

<div *ngIf="showErrorMessage">{{errorMessage}}</div> 

だろう。

が最後属性指令あり、名前はそれが「属性ベースのディレクティブ」 例は以下のようになりall..its言う：

<input type="text" pPassword /> 

@Directive({ 
    selector: '[pPassword]' 
}) 

Answer 4

が、ここでサンプルディレクティブです。これは、コンポーネントの外で行われたクリックに対するイベントリスナーを追加します。

import {Directive, ElementRef, HostListener, EventEmitter, Output} from '@angular/core'; 

@Directive({ 
    selector: '[clickedOutside]' 
}) 
export class ClickedOutsideDirective { 
    @Output() 
    public clickedOutside = new EventEmitter(); 

    constructor(private _elemRef: ElementRef) { 
    } 

    @HostListener('document:click', ['$event']) 
    public onClick(event) { 
    const targetElement = event.target; 
    if (!targetElement) { 
     return; 
    } 
    /** 
    * In case the target element which was present inside the referred element 
    * is removed from the DOM before this method is called, then clickedInside 
    * will be false even if the clicked element was inside the ref Element. So 
    * if you don't want this behaviour then use [hidden] instead of *ngIf 
    */ 
    const clickedInside = this._elemRef.nativeElement.contains(targetElement); 
    if (!clickedInside && !this._elemRef.nativeElement.isSameNode(targetElement)) { 
     return this.clickedOutside.emit(event); 
    } 
    } 
} 

次のようにこれを使用することができます。

<app-comp (clickedOutside)='close()'></app-comp> 

closeは、誰かがAngular2のドキュメントを1として外app-comp

Answer 5

をクリックするたびに、ディレクティブはの動作を変更するために使用されているトリガされますDOM要素。

mouseenterの場合はdiv、mouseleaveの場合は黄色にdivの背景色を変更するディレクティブを1つ作成します。

ステップ1：指令

@NgModule({ 
    imports: [...], 
    declarations: [MyComp , ColorFlip ] 
})