将代码转换为angular typescript

Question

我有一个应用程序根据输入的分隔符来标记输入字符串。我目前的代码效果很好。但现在我正在尝试将我的代码转换为使用打字稿的angular 2。我不知道打字稿中的问题以及如何将我的过滤器和模块放在.ts文件中。我使用angular cli来开发项目存储库。

这是我目前的角度代码：

angular.module('myApp', [])
.controller('HelloController', function ($scope) {
    $scope.greeting = "Angular is Awesome";
    //$scope.delimeter="#";
})


.filter('tokenize', function () {
return function (value, optionalArg) {
    if (angular.isString(value)) {
        var abc=[];
        abc=value.split('');
        value=abc.join(optionalArg);
        return value;
    } else {
        return value;
  }
 }
});

这是我的html文件：

    <div ng-controller='HelloController'>
    <label>Input</label><input ng-model='greeting'><br><br>
    <label>Delimeter</label><input ng-model='arg1'><br>
    <p>{{greeting | tokenize}}(default)</p>
    <p>{{greeting | tokenize:arg1}}(with Option)</p>
   </div>

问题是现在我正在尝试使用typescript编写代码。我有角度cli文件的问题。下面是我的p.component.ts代码：

    import { Component, OnInit } from '@angular/core';

 @Component({
   selector: 'app-part2',
   templateUrl: './part2.component.html',
   styleUrls: ['./part2.component.css']
   })
  export class Part2Component implements OnInit {
   greeting: string;
   constructor() {
   this.greeting="Angular is awesome";
 }

 ngOnInit() {
 }
 }

我的html代码是

       <input type="text" {{ng-model}}='greeting'><br><br>
       <input type="text" {{ng-model}}='arg1'><br>
       <p>{{greeting | tokenize}}(default)</p>
       <p>{{greeting | tokenize:arg1}}(with Option)</p>

我还有tokenize.ts文件，我需要放置由我创建的过滤器。 但问题是当我使用angular cli编译代码时，它没有给出任何结果。所以请帮助我这样做。没有标记化的程序输出在下面由图像给出。