13

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

4

5 に答える 5

18

Simple-Directive-Demo . これは、 angular2 ディレクティブで開始する非常に単純な例です。

コンポーネントとディレクティブがあります。

ディレクティブを使用してコンポーネントのビューを更新します。さらに、ディレクティブの 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;
     }

 }
于 2016-01-28T06:29:42.650 に答える
10

簡単 に言うと、コンポーネント ディレクティブは、アプリの構築中によく使用するテンプレートを使用したディレクティブになります -> HTML 内 -><custom-tag></custom-tag>

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

構造ディレクティブは、要素の追加を削除して DOM を変更するものです。例は

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

ngIf は、true の場合は div を追加し、false に変更された場合は削除します。

最後はAttribute Directiveです。名前がすべてを示しています。「属性ベースのディレクティブ」です。例は次のとおりです。

<input type="text" pPassword />

@Directive({
    selector: '[pPassword]'
})
于 2016-04-04T13:46:05.017 に答える
5

Angular ディレクティブには次の 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

于 2016-02-19T01:24:21.317 に答える
3

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

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誰かが外部をクリックするたびにトリガーされますapp-comp

于 2016-07-31T20:22:39.317 に答える