NG-init alternatief in hoek 2

Wat is het alternatief van ng-init="myText='Hello World!'"In Angular 2 om in de sjabloon toe te voegen, niet in de component

<div ng-app="" ng-init="myText='Hello World!'">

het alternatief in hoek 2

1, Autoriteit 100%

U kunt een richtlijn

gebruiken

@Directive({
  selector: 'ngInit',
  exportAs: 'ngInit'
}) 
export class NgInit {
  @Input() values: any = {};
  @Input() ngInit;
  ngOnInit() {
    if(this.ngInit) { this.ngInit(); }
  }  
}

U kunt het gebruiken om een ​​functie te geven die moet worden genoemd als

<div [ngInit]="doSomething"

of om waarden beschikbaar te maken

<div ngInit [values]="{a: 'a', b: 'b'}" #ngInit="ngInit">
  <button (click)="clickHandler(ngInit.values.a)">click me</button>
</div>

• ngInitVoegt de richtlijn

toe

• [values]="{a: 'a', b: 'b'}"Stelt een aantal initiële waarden in
• #ngInit="ngInit"Creëert een referentie voor later gebruik
• ngInit.values.aLeest de aWaarde uit de gemaakte referentie.

Zie ook Converteren van hoek 1 naar hoekig 2 NGINIT functie

2, Autoriteit 35%

Een andere benadering is het gebruik van de @Outputdecorateur en 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();
    }
}

En gebruik het dan als volgt:

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

Demo

Antwoord 3, autoriteit 19%

@Directive({
  selector: '[ngxInit]',
})
export class NgxInitDirective {
  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef) {
  }
  @Input() set ngxInit(val: any) {
    this.viewContainer.clear();
    this.viewContainer.createEmbeddedView(this.templateRef, {ngxInit: val});
  }
}

een waarde-expressie wordt ingesteld via *ngxIniten gepubliceerd met behulp van asmicrosyntaxis:

<div *ngxInit="3 * i + j as idx">{{idx}}</div>

gepubliceerd als https://www.npmjs.com/package/ngx-init

Antwoord 4, autoriteit 15%

U hebt hiervoor niet altijd een aangepaste richtlijn nodig.
Als je in orde bent met je functie die meer dan eens wordt genoemd, kun je eenvoudig doen:

<input #input [attr.init]="resizeInput(input)"/>

Het woord “init” er is volledig willekeurig. Het nadeel is dat uw uwitfunctie wordt opgeroepen op elke digestcyclus.

Opmerking, als u iets van uw functie retourneert, voegt dit een attribuut toe, genaamd “init” aan uw element met de geretourneerde waarde. Als u undefinedretourneert, wordt het kenmerk niet toegevoegd.

Dit is normaal gesproken een niet-probleem, houd het gewoon in gedachten.

5, Autoriteit 12%

Het is mogelijk door Oninit Levenscyclushaak zoals hieronder,

te gebruiken

1. Importeer oninit vanuit de kernbibliotheek

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

2. Implementeer het op uw componentklasse

   export class App  implements OnInit {
   }
   

3. Implementeer de NGONINIT-methode

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

live demo

6, Autoriteit 8%

Hoewel ik het ermee eens ben dat de initialisatie in de NGONINIT-levenscyclushaak moet gaan, moet ook worden opgemerkt dat u de constructeur van het onderdeel kunt gebruiken om leden initialiseren. In uw eenvoudige voorbeeld kunt u zelfs de aangifte van de lidstaten gebruiken om de variabele in te stellen, b.v.:

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

7

Weinig update!
In de laatste versies van Angular zal dit niet werken:

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

U moet ‘[]’ moeten gebruiken:

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

Antwoord 8

Ik heb een vrij eenvoudige oplossing voor dit probleem gevonden met het kenmerk data.
In mijn voorbeeld gebruik ik het alleen om te laten zien, maar een schakelaar of wat dan ook is natuurlijk mogelijk met dezelfde methode.

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

Ik heb een kleine demo op stackblitz gemaaktover hoe dit werkt

Antwoord 9

Wat dacht je hiervan?:

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

Gebruik als volgt:

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