Angular 2表达式解析器和ng-init指令

Question

基本上我正在寻找一种方法来实现Angular 1.x ngInit指令的对应物。

我知道ngOnInit挂钩以及它是初始化代码的推荐位置。我认为ngInit指令是一种快速的，声明性的方式来原型化或修复一个通常不会在编写良好的生产代码中使用的组件（尽管开发人员有权选择最适合的组件）他/她的）。

在init虚拟指令

中做类似的事情

<p [init]="foo = 1; bar()"><p>

多次评估表达式并导致

  

模板解析错误：

     

分析器错误：绑定不能包含分配

错误。

在Angular 1.x中，可以使用

完成

$parse($attrs.init)($scope)

如何使用Angular 2解析器并可能扩展为在组件初始化时评估foo = 1; bar()模板表达式？

Answer 1

只是一种解决方法（Plunker Demo），请参阅 estus 的解决方案答案

init指令：

@Directive({
  selector: '[init]',
  inputs: ['init']
})
export class InitDir {
  init;

  ngOnChanges() {     // `ngOnInit` if you want it to run just once
    if(this.init){
      let iife = function(str){ return eval(str); }.call(this.init[0], this.init[1]);
    }
  }
}

用法：

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2 [init]="[this, 'this.name = 1; this.bar();']">Hello {{name}}</h2>
    </div>
  `,
})
export class App {
  constructor() {
    this.name = 'Angular2 (Release Candidate!)'
  }

  bar() {
    alert('Yo Bar!');
  }
}

Answer 2

这可以通过指令来实现：

@Directive({ selector: '[initialize]' })
class InitializeDirective {
  @Output() initialize = new BehaviorSubject();
}

预期用途是：

<div (initialize)="initViaMethodCall(); foo = 'init via assignment'"></div>
<ng-template (initialize)="bar = 'init with no extra markup'"></template>
{{ foo }}
{{ bar }}