如何使用 2 个条件角度选择器

Question

我有一个带有选择器的多输入组件，如下所示：

<app-input type="currency" formControlName="currency"></app-input>

<app-input type="date" formControlName="dateOfBirth"></app-input>

因此，从该组件中，我有一个像这样的选择器：

@Component({
  selector: 'app-input[type=currency]',
})

@Component({
  selector: 'app-input[type=date]',
})

现在，我想添加多个

currency

组件。一种用于默认货币成分，第二种用于具有动态货币符号的货币。

所以，我想通过选项让它变得不同。当选择器有选项时，显示带动态符号的货币，否则或默认，显示不带符号的默认货币。

我一直在尝试使用下面的这个选择器，但它不起作用。

对于默认货币：

@Component({
  selector: 'app-input:not([options])[type=currency]',
})

对于动态符号货币：

@Component({
  selector: 'app-input[options][type=currency]',
})

提前谢谢您

Answer 1

您可以像这样添加数据属性来区分选择器

无符号：

@Component({
  selector: 'app-input[type=currency]',
})

带有符号：

@Component({
  selector: 'app-input[type=currency][data-symbols]',
})

html

with symbols: <app-input type="currency" formControlName="currency" data-symbols></app-input>
without symbols: <app-input type="currency" formControlName="currency"></app-input>