Question

@Component({
    selector: 'ion-col',
    templateUrl: 'components-field.html'
})

export class FieldComponent {
    @HostBinding('attr.layout')
    layout = '¯\_(ツ)_/¯';
    element: any;
    constructor() {
        console.log('Hello ComponentsFieldComponent Component');
    }

    setElement(element) {
        this.element = element;
    }


}

在这个例子中，我可以动态设置“layout”属性的值。这个例子将会：

<ion-col layout="¯\_(ツ)_/¯"></ion-col>

但是我想动态设置属性名称以实现此目的：

<ion-col col-3></ion-col>
<ion-col col-5></ion-col>
<ion-col col-12></ion-col>

我可以创建我的组件的12个版本。我不会。有什么想法吗？

Answer 1

在Angular中通过模板绑定动态添加或删除属性并不是一种简单的方法，因为属性本身通常应该是静态的，而是改为更改值。

但是，这并非不可能。我建议将逻辑折叠成一个指令：

@Directive({
   selector: '[colThing]'
})
export class ColThingDirective {

  @Input('colThing') 
  set colCriteria(value) {
   this.doLogicToChangeAttributes(value);
  }

  public attributeList = ['col-5', 'col-3'];

  constructor(private _r: Renderer2, private el: ElementRef) {}

  doLogicToChangeAttributes(value) {
    if (value === 'col-5-criteria') {
      this.removeAttributes();
      this._r.setAttribute(this.el.nativeElement, 'col-5', '');
    }

  }

  removeAttributes() {
    this.attributeList.forEach(s => this._r.removeAttribute(this.el.nativeElement, s));
  }
}

在组件中：

export class FieldComponent {

  @HostBinding('[ColThingDirective]') someCriteriaToChangeAttribute; // <--
 @Input to directive

}

然而，基于这个用例，如果没有更好的内置功能行为，我会感到非常惊讶。我会假设这些属性实际上是指令（需要通过HostBinding更改）或者有一些内置的方法来处理我认为是响应的内容。那里的属性只是为了造型而非常不寻常。

Answer 2

到目前为止我想出的最简单的方法...

<ion-col [attr.col-12]="myValue === 'col-12' ? '' : null"
         [attr.col-6]="myValue === 'col-6' ? '' : null">

在组件选择器上动态添加/更改属性

2 个答案: