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

Answer 2

可以使用 OnInit 生命周期挂钩，如下所示

从核心库导入OnInit

import {Component, OnInit} from '@angular/core'

将其实施到您的组件类

export class App  implements OnInit {

}

实施ngOnInit方法

 ngOnInit(){
    this.myText='Hello World!'

   }

<强> LIVE DEMO

Answer 3

虽然我同意初始化应该进入ngOnInit生命周期钩子，但是还应该注意，您可以使用组件的构造函数来初始化类成员。在您的简单示例中，您甚至可以使用成员声明来设置变量，例如：

@Component({ template: '<div>{{myText}}</div>' })
export class MyComponent {
    myText = 'Hello World!';
}

Answer 4

*ngxInit

值表达式通过as设置并使用<div *ngxInit="3 * i + j as idx">{{idx}}</div>微语法发布：

{{1}}

发布为https://www.npmjs.com/package/ngx-init

Answer 5

小小的更新！在最新版本的Angular中，这不起作用：

@Directive({
 selector: 'ngInit',
 exportAs: 'ngInit'
})

你应该使用＆＃39; []＆＃39;：

@Directive({
   selector: '[ngInit]',
   exportAs: 'ngInit'
})

Answer 6

可能会比Günter的答案有所改善：

@Directive({
  selector: 'ngInit',
  exportAs: 'ngInit'
}) 
export class NgInit {
  @Input() ngInit: () => any;
  ngOnInit() {
    if(typeof this.ngInit === 'function') { 
        this.ngInit(); 
    } else {
        // preventing re-evaluation (described below)
        throw 'something';
    }
  }  
}

然后使用高阶函数传递数据，如下所示：

// component.ts
myInitFunction(info) {
  // returns another function
  return () => console.log(info);
}

如果您使用这样的高阶函数，则也不必担心this内的myInitFunction是什么，因为箭头函数确实是传递的。

像这样使用指令：

// component.html
<another-component #ref></another-component>
<div [ngInit]="myInitFunction(ref)"></div>

如果尝试创建一个不按此处所述方式将函数作为输入传递的指令，则存在无限循环的风险。例如，如果整个指令只是对您给出的表达式求值，您就会得到。

如果您的myInitFunction方法没有返回另一个函数（并且您的HTML与上面的HTML相同），则会发生这种情况。您将退出控制台，返回未定义，然后更改检测将对其进行重新评估，一遍又一遍地安慰您。

Answer 7

您不一定总是为此需要一个自定义指令。如果您可以多次调用函数，可以执行以下操作：

%InstallerFolder%\PsExec.exe -s \\%%c -f -u %%a -p %%b -c %InstallerFolder%\InstallProcess.bat

“ init”一词完全是任意的。缺点是yourInitFunction将在每个摘要周期被调用。

请注意，如果您从函数中返回任何内容，则会在元素中添加一个名为“ init”的属性，并返回值。如果返回<input #input [attr.init]="resizeInput(input)"/>，则不会添加该属性。

这通常是非问题，请记住这一点。

Answer 8

另一种方法是使用@Output装饰器和EventEmitter：

import {Directive, OnInit, Output, EventEmitter} from '@angular/core';

@Directive({
    selector: '[ngInit]'
})
export class NgInitDirective implements OnInit {

    @Output()
    ngInit: EventEmitter<any> = new EventEmitter();

    ngOnInit() {
        this.ngInit.emit();
    }
}

然后像这样使用它：

<div *ngIf="condition" (ngInit)="initialize()">  ... </div>

Demo

Answer 9

我发现使用 data 属性可以很容易地解决此问题。在我的示例中，我只是用它来显示，但显然可以使用相同的方法进行切换或其他任何操作。

<div data-expand="false" #expandWrap>
  <span *ngIf="expandWrap.dataset.expand == 'false'">
    {{'Test expand without..'}}
    <span (click)="expandWrap.dataset.expand = 'true'">more</span>
  </span>
  <span *ngIf="expandWrap.dataset.expand == 'true'">
       {{'Test expand with more text because now we are expanded!'}}
  </span>
</div>

我做了 a small demo on stackblitz 关于它是如何工作的

Answer 10

这个怎么样？：

@Directive({
  selector: '[onInit]'
})
export class OnInitDirective implements OnInit {
  @Output() onInit = new EventEmitter<void>();

  ngOnInit(): void {
    this.onInit.emit();
  }
}

像这样使用：

<div (onInit)="doSomeStuff(someValue)"></div>

Angular 2中angular的ng-init替代方案

10 个答案: