Как я могу преобразовать 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

Поскольку у вас есть директива с шаблоном, которая может отображаться в пользовательском интерфейсе с помощью тега селектора, следовательно, вы можете использовать эквивалентный Component в Angular 6 (или что-либо большее, чем версия 2x).Вот эквивалентный код в машинописном тексте / 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