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

Question

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

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

在 init 虚拟指令中做类似的事情

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

多次计算表达式并导致

Template parse errors:

Parser Error: Bindings cannot contain assignments

错误。

在 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 }}

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

Angular 2 expression parser and ng-init directive

javascript

typescript

angular2-directives

angular2-template

angular

`init` 指令：

用法：

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

Angular 2 expression parser and ng-init directive

javascript

typescript

angular2-directives

angular2-template

angular

init 指令：

用法：

`init` 指令：