Angular 2 中 angular 的 ng-init 替代品

Question

Angular 2 中的 ng-init="myText='Hello World!'" 有什么替代方法可以添加到模板中，而不是添加到组件中

 <div ng-app="" ng-init="myText='Hello World!'">

Angular 2 中的替代方案

Answer 1

你可以使用指令

@Directive({
  selector: 'ngInit',
  exportAs: 'ngInit'
}) 
export class NgInit {
  @Input() values: any = {};

  @Input() ngInit;
  ngOnInit() {
    if(this.ngInit) { this.ngInit(); }
  }  
}

你可以用它来传递一个被调用的函数

<div [ngInit]="doSomething"

或使值可用

<div ngInit [values]="{a: 'a', b: 'b'}" #ngInit="ngInit">
  <button (click)="clickHandler(ngInit.values.a)">click me</button>
</div>

• ngInit 添加指令
• [values]="{a: 'a', b: 'b'}"设置一些初始值
• #ngInit="ngInit" 创建供以后使用的引用
• ngInit.values.a 从创建的引用中读取 a 值。

另见 Converting Angular 1 to Angular 2 ngInit function