基於給定屬性更改組件行爲

Question

如何在Angular中創建基於給定屬性更改行爲的組件？

實施例：

<my-comp [data]="data"></my-comp> 

VS

<my-comp [data]="data" sortable> </my-comp> 

<my-comp>只是一個Component女巫示出的數據作爲一個HTML列表。如果在不使用@Input()的情況下設置屬性sortable，是否可以檢查MyComponent？ 我必須定義Directive還是可以以某種方式訪問​​屬性？

Answer 1

我懷疑你可以通過使用@Attribute裝飾

my.component.ts

@Component({ 
    selector: 'my-comp', 
    template: ` 
    <h1>Comp hasSortable {{ hasSortable }}</h1> 
    ` 
}) 
export class MyComponent { 
    hasSortable: boolean; 
    constructor(@Attribute('sortable') private sortable: any) { 
    this.hasSortable = sortable !== null; 
    } 
} 

parent.component.html

做

<my-comp></my-comp>   // Prints "Child hasSortable false" 
<my-comp sortable></my-comp> // Prints "Child hasSortable true" 

Plunker Example

Answer 2

喜歡的東西：

private _sortable:boolean = false; 
@Input() sortable(val) { 
    if(val) { 
    this._sortable = true; 
    } 
}