如何将angularJS指令转换为Typescript？

Question

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

我正在使用：

  

ionic（Ionic CLI）：4.2.1

那是代码：

@Injectable()
export class AuthGuard implements CanActivate {

    canActivate(): boolean {

        // 1 fetch the type of use
        const type = 1;
        if (type === 1) return false;
        else return true;

    }
}

plunker

感谢您的帮助！

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];
  }

}

salary.component.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