Question

如何在Angular中创建一个基于给定属性改变行为的组件？

示例：

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

vs

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

<my-comp>只是Component女巫将数据显示为html列表。如果设置属性MyComponent而不使用sortable，是否可以检查@Input()？我是否必须定义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;
  }
}

根据给定属性

2 个答案: