サンプルを作成した人は@Directive
デコレータを使用していますか?私は多くのことを探しましたが、これまでのすべての開発者がコンポーネントディレクティブを作成しました。たとえ Angular API Reviewでさえこれについてもっと話していません。角度指令
角度指令
答えて
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;
}
}
@micronyksありがとう! – Kenz
@AviKenjaleもしあなたがそれを得たら、正しいものとしてマークしてみてはいかがですか? –
角度指令の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
コンポーネント指令アプリを構築しながら、我々は多くを使用したテンプレートを使用してディレクティブになります - >あなたの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]'
})
が、ここでサンプルディレクティブです。これは、コンポーネントの外で行われたクリックに対するイベントリスナーを追加します。
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
をクリックするたびに、ディレクティブはの動作を変更するために使用されているトリガされますDOM要素。
mouseenterの場合はdiv、mouseleaveの場合は黄色にdivの背景色を変更するディレクティブを1つ作成します。
ステップ1:指令
@NgModule({
imports: [...],
declarations: [MyComp , ColorFlip ]
})
- 1. ドロップダウン指令角度
- 2. 簡単な角度指令
- 3. FacebookのコメントIon Appの角度指令
- 4. 角度指令テンプレートの不明なスコープ
- 5. 角度指令テーブルの行の問題
- 6. コントローラからの角度指令関数
- 7. ブートストラップモードのための単純な角度指令
- 8. 角度指令に補間値を設定する方法は?
- 9. 角度:ng-repeatの項目を指令に渡します
- 10. ngRepeatの配列要素からの角度指令
- 11. 角度指令:親スコープ内の変数にバインド
- 12. サービスを使った角度指令のユニットテスト
- 13. 角度指令のD3要素を追加する
- 14. 角度材料のページ区切り指令
- 15. templateUrlによる角度指令 - Plunkerの問題?
- 16. 角度2の指令定義を上書きする方法
- 17. 動的コンテンツを使用した角度指令
- 18. 新しいカスタム角度指令が機能しない
- 19. 変数内の変数をhtmlの角度指令に渡します
- 20. 遅延読み込みWebpackチャンクとしてのui-routerの角度指令
- 21. 角度指令 - ngモデルで双方向結合を設定する方法
- 22. thymleafの変数に格納された角度指令を使用する
- 23. 角度指令:送信ボタンの指示に従ってフォームの検証を聞きます
- 24. 角度とngリピートの指示
- 25. 最初の角度指示:静的テーブル
- 26. ng-repeatで使用できない角形材料指令
- 27. $ mdDiaogのような角型プロバイダ/工場/指令
- 28. NHAML指令
- 29. Angularjsコントローラ指令
- 30. AngularJS指令値
を登録し、[開発者ガイド - > 12.属性ディレクティブ](:指令
作成手順3:コンポーネント
ステップ2を作成します。 https://angular.io/docs/ts/latest/guide/attribute-directives.html)... –
Ahhh ..あなたがいました! Thanks @ EricMartinez – Kenz
また、[開発ガイド - 13.構造指令](https://angular.io/docs/ts/latest/guide/structural-directives.html)、_unless_指令。 –