javascript - angular速成 - ng model




Angular 2表達式解析器和ng-init指令 (2)

基本上我正在尋找一種方法來實現對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() foo = 1; bar()組件初始化的模板表達式?


只是一個解決方法( Plunker演示 ),請參閱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!');
  }
}

它是

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

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




angular2-directives