Question

angular.module('app', []).controller('MessagesCtrl', function() {



$scope.self.list = [
    {text: 'Hello, World!'},
    {text: 'This is a message'},
    {text: 'And this is another message'}
];

self.clear = function() {
    $scope.self.list = [];
  };
});

上面的代码是角度1，如何将其转换为角度2分量？

Answer 1

Angular2中没有控制器的概念。所以你的代码可以使用Angular2进行转换：

组件定义

@Component({
  selector: 'my-component',
  template: `
    <ul>
      <li *ngFor="#elt of list">{{elt.text}}</li>
    </ul>
    <span (click)="clear()">Clear</span>
  `
})
export class MyComponent {
  constructor() {
    this.list = [
      {text: 'Hello, World!'},
      {text: 'This is a message'},
      {text: 'And this is another message'}
    ];
  }

  clear() {
    this.list = [];
  }
}

在另一个组件中使用

@Component({
  selector: 'my-component',
  template: `
    <my-component></my-component>
  `,
  directives: [MyComponent]
})
export class OtherComponent {
  (...)
}

模板的内容非常小，因为它实际上取决于您想要显示的内容。

希望它可以帮到你，亨利

如何将angularJS版1.X控制器转换为angularJS 2.X组件？

1 个答案: