指令的动态属性值

Question

我有一个带有以下注释的指令：

@Directive({
    selector: 'i-text-field[number-format]',
    providers: [NgModel]
})

在指令中，我使用输入注释获得属性值。

export class NumberFormatDirective {

@Input('number-format') format: string;
...

现在，我可以在组件中定义数字格式，如

<i-text-field
label='Number' hint='00000,00'
number-format='7,2'
ngControl>
</i-text-field>

如何通过使用函数来告诉组件要使用哪种格式？

number-format='<<function-call>>'

Answer 1

看看本文讨论角2的模板语法。。假设您在组件中编写了一个名为setNumberFormat()的函数，您可以将number-format属性的值设置为：

// my-component.ts
import { Component } from "@angular/core";
import { NumberFormatDirective } from "./number-format-directive.ts";

@Component({
    directives: [NumberFormatDirective],
    template: `
        <i-text-field
            label='Number' hint='00000,00'
            number-format='{{setNumberFormat()}}'
            ngControl>
        </i-text-field>
    `
})
export class MyComponent {

    setNumberFormat(): string {
        // code to set your number format, e.g.
        return "7,2";
    }
}