将 Angular 1 转换为 Angular 2 ngInit 函数答案

【问题标题】：Converting Angular 1 to Angular 2 ngInit function将 Angular 1 转换为 Angular 2 ngInit 函数
【发布时间】：2016-10-11 17:51:08
【问题描述】：

在angular1中，我们根据ng-if条件调用函数ng-init。以下代码表示如果第一个 div 与日期 && 时间匹配，那么它将检查第二个条件，检查或未检查。如果选中则自动调用 play() 函数，如果未选中则调用 pause 函数。

<div ng-if="ramadan.date === date && ramadan.time === clock">
  <div ng-if="ramadan.checked" ng-init="play()"></div>
  <div ng-if="!ramadan.checked" ng-init="pause()"></div>
</div>

我想用 angular2 typescript 转换这段代码。有没有办法根据角度2中的条件自动调用函数？

【问题讨论】：

标签： javascript angularjs angular

【解决方案1】：

Angular2 中没有ng-init。不过，您可以轻松地自己创建这样的指令。

import { Directive, Input } from '@angular/core';

@Directive({
    selector: '[ngInit]'
})
export class NgInit {
    @Input() ngInit;
    ngOnInit() {
        if (this.ngInit) {
            this.ngInit();
        }
    }
}

然后像使用它一样

<div *ngIf="ramadan.date === date && ramadan.time === clock">
  <div *ngIf="ramadan.checked" [ngInit]="play"></div>
  <div *ngIf="!ramadan.checked" [ngInit]="pause"></div>
</div>

【讨论】：

这是使用指令调用 ngInit 函数的方式。但在我的情况下，它的工作方式不同。谢谢！！
“在我的情况下，它的工作方式不同”是什么意思？
我使用的指令没关系，但根据它的工作条件，就是这样。
当第一个*ngIf为真时，调用play()，否则调用pause()。我不明白问题出在哪里。
是的！一些关于 angular 2 指令的研究然后我写了这些步骤。正在阅读-angular.io/docs/ts/latest/guide/structural-directives.html。谢谢！！你的方向是正确的。

【解决方案2】：

工作代码，

自定义指令：

import { Directive, Input } from '@angular/core';

@Directive({ selector: '[myCondition]' })

export class ngInitDirective {
  constructor() { }


  @Input() set myCondition(condition: boolean) {
    if (!condition) {
      console.log("hello")
    } else {
      console.log("hi")
    }
  }
}

在模板中：

<ion-label *ngIf="setting1.date === current_date && setting1.time === current_time">
          <div *myCondition="setting1.checked === condition" >Play</div>
          <div *myCondition="!setting1.checked === !condition">pause</div>
      </ion-label>

【讨论】：

【解决方案3】：

您可以在组件类中使用 ngOnInit 方法，但请记住实现 OnInit 接口。

这是一个例子：

@Component({
  selector: 'ramadan',
  template: `<div>Ramadan</div>`
})
class Ramadan implements OnInit {
  ngOnInit() {
    this.play();
  }
}

您可以找到有关 ngOnInit here 的更多信息。

【讨论】：