Weboldal keresés

typescript - angular @Input és adat interpoláció nem működik webkomponensekben

Van egy webes komponenskönyvtárom, amelyet különböző Angular projektekben fogok használni. Az @angular/elements-t használom arra, hogy a komponenseimet újrahasználható elemekké alakítsam, majd http-server segítségével szolgálom ki őket.

egy összetevő, amit létrehoztam, egy egyedi h1 volt:

h1-összetevő.ts

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

@Component({
  selector: 'app-h1',
  templateUrl: './h1.component.html',
  styleUrls: ['./h1.component.scss'],
  encapsulation: ViewEncapsulation.ShadowDom
})

export class H1Component {
  private _text: string = '';

  @Input() set text(text: string) { this._text = text; }
  get text(): string { return this._text; }
}

h1-összetevő.html

<h1>{{ text }}</h1>

a app.module.ts-emben a saját elememet így deklaráltam

const h1El = createCustomElement(H1Component, {
  injector: this.injector
});
customElements.define('custom-h1', h1El);

Az alkalmazásom a https://angular.io/guide/elements szerint van beállítva

Miután befejeztem az összes komponensemet, továbbléptem azok tesztelésére egy másik Angular alkalmazás létrehozásával, azzal a beállítással, hogy a környezetem betöltse a scriptemet. Azonban ekkor vettem észre, hogy az egyedi komponenseim nem veszik át az @Input értékeimet.

Az új alkalmazásomban:

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {
  header = "Custom header";
}

app.component.html

<custom-h1 text="{{ header }}"></custom-h1>

Miután futtattam a ng serve-t az új alkalmazásomon és az http-server-t az összetevőim könyvtárában, a várható eredmény az "Custom header" lenne. Azonban nem látok semmilyen eredményt.

Ha egy karakterlánc értéket teszek a text belsejébe (pl. <custom-h1 text="Custom header string"></custom-h1>), látni tudom a helyes kimenetet, ami "Custom header string".

Bármilyen gondolat vagy javaslat? Vagy hivatkozás? Köszönöm.

Válasz #1

Azt hiszem, ez a magyarázat itt található: https://github.com/angular/angular/issues/29050. Ha a változóidat console.log()-olod az ngOnChanges() hook-ban, megkapod a megfelelő értékeket, de az ngOnInit()-ben még mindig undefined. Az, hogy a hook-ok milyen sorrendben hajtódnak végre, változik, ha egyedi elemeket (custom elements) használsz. Ezért volt az, hogy nálad undefined volt. Az én esetemben még mindig keresem, hogyan tudnám kényszeríteni, hogy az ngOnChanges() fusson először, majd az ngOnInit(), de eddig még nem jártam sikerrel.

tegyél úgy:

ngOnChanges(): void {
    this._text = text;
}

lásd ezt: Angular Elements: @Input dekorátor nem működik változókkal

Válasz #2

talán ez segíteni fog <custom-h1 [text]="header"></custom-h1>

Kapcsolódó cikkek