如何将 angularJS 指令转换为 Typescript?

Question

大家好，我需要一条指令。这应该设置为十进制数字。我找到了我想要的。 但是我没有在我的项目上运行这段代码。

我正在使用：

离子

(离子 CLI( ： 4.2.1

那是代码：

app.directive('salary', function(){
return {
restrict: 'E'
, scope: {
salary: '@'
}
, controller: controller
, controllerAs: 'dvm'
, bindToController: true
, template: '<h2><sup>$</sup>{{ dvm.dollar }}<sub>.{{ dvm.cents }}</sub></h2>'
};
function controller(){
var parts = parseFloat(this.salary).toFixed(2).split(/./);
this.dollar = parts[0];
this.cents = parts[1];
}
});

普伦克

感谢您的帮助！

Answer 1

由于您有一个带有模板的指令，可以在带有选择器标签的 UI 中显示，因此您可以在 Angular 6(或任何大于 2x 的版本(中使用等效Component。这是打字稿/Angular 6 中的等效代码

salary.component.ts

import { Component ,OnInit} from '@angular/core';
@Component({
selector: 'salary',
templateUrl: './salary.component.html'
})
export class SalaryComponent  implements OnInit{
salary:string = "9033";
dollar:string; 
cents:string;
ngOnInit(){
let parts = parseFloat(this.salary).toFixed(2).split(/./);
this.dollar = parts[0];
this.cents = parts[1];
}
}

工资.组件.html

<h2><sup>$</sup>{{ dollar }}<sub>.{{ cents }}</sub></h2>

用法

<salary></salary>

如果要动态设置薪水的值，则需要使用@Input()装饰器从父组件设置属性的值，如下所示 -

@Input() formattedSalary:string = "";

并在 HTML 中使用它，例如 -

<salary [formattedSalary]="9033"></salary>

这是 Angular 6 中的一个工作示例

https://stackblitz.com/edit/hello-angular-6-tagnx9