html - 主机绑定重新排列应用的类

Question

我正在使用@HostBinding('class')将类注入宿主元素。要注入的类是根据用户提供的参数生成的。我遇到的问题是我找不到其他人遇到的问题是课程的应用顺序与我预期的方式不同。

例如，有一个组件定义如下：

import {Component, HostBinding, Input} from '@angular/core';

@Component({
  selector: '[icon]',
  template: `
    <ng-content></ng-content>
  `
})
export class SuiIconComponent {
  @Input() iconType = '';

  @HostBinding('class')
  get classes(): string {
    return [this.iconType, 'icon'].join((' '));
  }
}

当我应用如下所示的组件时：

<div icon iconType="car"></div>

并检查，我看到<div class="icon car"></div>的不是适当格式的<div class="car icon"></div>. 我曾尝试在加入之前反转阵列，但这也无济于事。有什么方法可以让课程以正确的顺序呈现？

编辑：我意识到课程正在按字母顺序重新排列。

Answer 1

我不确定为什么 angular 会更改顺序，但是您可以通过对模板进行一点更改来解决您的问题。

@Component({
  selector: 'icon',
  template: `
    <div [ngClass]="iconType + ' icon'">
       <ng-content></ng-content>
    </div>
  `
})
export class SuiIconComponent {
  @Input() iconType = '';
}

并按如下方式使用

<icon iconType="car">
   Some content here
</icon>