什麼是屬性指令的例子

-1

我有在識別的時候，我應該什麼是屬性指令的例子

創建屬性指令困難，
意識到我需要創建屬性指令，
使用的輸入和輸出特性

屬性指令的需要是什麼？

我傾向於將所有邏輯包含到一個組件中，我知道它的定義，但實際上，我找不到示例。

什麼是最佳實踐？

來源

2017-01-01 john doe

http://stackoverflow.com/questions/34613065/what-is-the-difference-between-component-and-directive的可能的複製 –

避免將標籤標題，除非這是問題的必要部分。最佳實踐請求是關於堆棧溢出的主題。 –

指令可用於操作DOM元素。當你想要制定一個可以被你的團隊或世界中的其他程序員使用的自定義（第三方）指令時，它非常有用。

基本上有三種類型的指令。

1）結構指令
2）屬性指令
3）元器件指令（與模板）

1）結構指令通常操縱結構視圖/模板。例如。 *ngFor將根據您的列表數量生成元素。 *ngIf將根據傳遞值顯示/隱藏視圖。

2） 屬性指令 讓您與DOM元素添加DOM元素的屬性，然後你可以做很多事情。

例如。

<p myColor >Color me!</p> //<<< this helps you to grab DOM element using ElementRef and then I'll color it as shown below. 

import { Directive, ElementRef, HostListener, Input } from '@angular/core'; 
@Directive({ 
    selector: '[myColor]' 
}) 
export class HighlightDirective { 
    constructor(private el: ElementRef) { 
    el.nativeElement.style.backgroundColor = 'red'; 
    } 
}

這裏myColor只是一個attribute directive，因爲它被添加到DOM元素作爲attribute但這屬性不接受任何價值尚未。

現在，讓我們添加了一個值myColor屬性，

<p [myColor]="color">Highlight me!</p>

@input：在這裏我們傳遞 color variable(Angular2 bindings)所以在指令我們必須有一種機制來接受它。所以，我們應該用 @Input API，我們會得到從父組件值（可以考慮指令，因爲父母的孩子）

@Output：如果你想指令發出，應該由家長收到一定的價值成分那麼你應該使用 @Output API

來源

2017-01-01 07:00:05 micronyks

帶屬性指令我們只能改變它的樣式而沒有任何東西？ –

什麼是屬性指令的例子

回答

相關問題