Winkelrichtlinie

Question

hat jemand ein beliebiges Beispiel erstellt Winkelrichtlinie mit @Directive dekorateur? Ich habe viel gesucht, aber alle Entwickler haben bisher Komponentendirektiven erstellt. Selbst Angular API Review spricht dazu nicht mehr.

Answer 1

Simple-Directive-Demo. Dies ist ein sehr einfaches Beispiel, um mit der Anweisung angular2 zu beginnen.

Ich habe eine Komponente und eine Direktive.

Ich verwende Direktive, um die Ansicht der Komponenten zu aktualisieren. Darüber hinaus Anweisung changeColor Funktion wird mit einer Komponente changeColor Funktion aufgerufen.

Komponente

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

Richtlinie

@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

Es gibt drei Arten von Angular-Richtlinien:

Components 
Attribute directives 
Structural directives 

Angular2 Führer Attribut Richtlinien Code: https://github.com/guyoung/GyPractice-Angular2/tree/master/apps/attribute-directives

Angular2 Führer Struktur Richtlinien Code: https://github.com/guyoung/GyPractice-Angular2/tree/master/apps/structural-directives

Answer 3

In einfachen Worten Komponente Richtlinie Ihre Richtlinien mit Vorlage, die wir eine Menge, während Sie ein App bauen -> in Ihrem hTML -><custom-tag></custom-tag>

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

Struktur Richtlinie ein Geben Sie diejenigen ein, die das DOM modifizieren, indem Sie die Elemente entfernen. Beispiel wäre

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

ngIf die div hinzufügen würde, wenn wahr sonst entfernen, wenn sie auf false ändert.

sind schließlich die Attribut Richtlinie, der Name sagt es all..its ein ‚Attribut basierte Richtlinie‘ Beispiel wäre:

<input type="text" pPassword /> 

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

Answer 4

Hier ist eine Beispielrichtlinie. Dies fügt einen Ereignis-Listener für Klicks außerhalb einer Komponente hinzu.

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

close ausgelöst wird, wenn jemand app-comp

Answer 5

Wie pro Angular2 docs außerhalb klickt, Richtlinien verwendet werden, um das Verhalten des ändern:

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

Dies kann wie folgt verwendet werden DOM-Element

Lassen Sie uns eine Direktive erstellen, die die Hintergrundfarbe des div im Fall von mouseenter auf gelb und im Falle von mouseleave in gelb ändern würde.

Schritt 1: Erstellen Component

import {Component} from '@angular/core'; 

@Component({ 
    selector: 'my-comp', 
    template: '<div colorFlip>This is just a Demo!</div>' 
}) 

export class MyComp {} 

Schritt 2: Erstellen Richtlinie

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

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

export class ColorFlip { 
    constructor(private el: ElementRef) {} 
    @HostListener('mouseenter') handleMouseEnter() { 
    this.flipColor('red'); 
    } 

    @HostListener('mouseleave') handleMouseEnter() { 
    this.flipColor('yellow'); 
    } 

    flipColor(color:string) { 
    this.el.nativeElement.style.backgroundColor = color; 
    } 
} 

Schritt 3: Registrieren Richtlinie

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