Používání prvků Angular – proč a jak? – část 1

BY admin
|

Začínáme

Začneme vytvořením nového projektu Angular v našem systému. Za tímto účelem se ujistěte, že máte nainstalovanou nejnovější verzi Angular CLI. V terminálu spusťte následující příkaz:

$ npm install -g @angular/cli

Po dokončení této instalace můžeme pomocí ní vytvořit novou počáteční aplikaci v našem systému takto:

$ ng new angular-app

Poté budete vyzváni k výběru dalších funkcí, které budete chtít do svého projektu Angular přidat, například směrování a typ formátu souboru stylů. Zvolte výchozí odpověď stisknutím klávesy Enter/Return.

Překladač CLI nainstaluje potřebné balíčky a závislosti systému Angular do složky s názvem angular-app. Tuto aplikaci můžete naservírovat prohlížeči spuštěním následujících příkazů: 

$ cd angular-app
$ ng serve --open 
// --open flag will open the browser for you

Jak vidíte, aplikace již obsahuje několik věcí, které můžeme zobrazit na obrazovce. My je však nepotřebujeme. Vraťte se tedy do editoru kódu (já ❤️ VS Code) a smažte vše uvnitř souboru src/app/app.component.html a napište jediný prvek <h1>. 

<h1>Welcome To Angular Elements!</h1>

Pokud se podíváte na strukturu souborů, zjistíte, že každá komponenta v angularu se skládá z mnoha souborů. Jen pro komponentu App existují soubory .ts, .html, .css a spec.ts, které obsahují testy, a soubor module.ts. K dispozici bude také volitelný soubor routing.module.ts, pokud byste se při vytváření aplikace pomocí rozhraní CLI rozhodli přidat funkci směrování.

Místo psaní všech těchto souborů pro naše komponenty nám rozhraní Angular CLI poskytuje zkrácenou metodu, která tyto soubory vygeneruje za nás. Použijme tuto metodu k vytvoření komponenty HelloWorld v našem systému. 

$ ng g c HelloWorld

Tento jediný příkaz vytvoří složku s názvem hello-world uvnitř složky app. Pokud tuto složku otevřete, najdete v ní tyto 4 soubory:

  • hello-world.component.css
  • hello-world.component.html
  • hello-world.component.spec.ts
  • hello-world.component.ts

Budeme používat pouze soubory .html a .ts. Existují další příznaky, které můžeme předat příkazu ng g c. Abychom však zachovali jednoduchost a smysluplnost, nebudu je používat. Více informací o tom, jak tento příkaz používat, najdete v dokumentech Angular Docs.

V souboru hello-world.component.ts uvidíte, že příznak selector je nastaven na app-hello-world. Pokud jej tedy přidáte do app.component.html takto:

<h1>Welcome To Angular Elements</h1>
<app-hello-world></app-hello-world>

Pak se v prohlížeči zobrazí obsah hello-world.component.html.

Naše počáteční nastavení je nyní připraveno. Začněme s tím, jak používat prvky Angular.

Převedení komponenty na vlastní prvek

Právě teď máme jednoduchou komponentu HelloWorld, která jednoduše vytiskne na obrazovku nějaký text. Podívejme se, jak můžeme tuto komponentu vložit do aplikace dynamičtějším způsobem. Za tímto účelem nahradíme komponentu app-hello-world komponentou div a button. Přidejme také k button posluchač click, takže když někdo klikne na tlačítko, může se zobrazit komponenta HelloWorld. O to se postará funkce showMessage(). Přejděte tedy na stránku app.component.html a proveďte tyto změny: 

<h1>Welcome To Angular Elements</h1>
<div></div>
<button (click)="showMessage()">Display?</button>

V souboru app.component.ts pak musíme definovat funkci showMessage(). Zde použijeme běžnou manipulaci s DOM, abychom získali div výběrem pomocí jeho id z hello. Poté použijeme funkci innerHTML pro vložení komponenty app-hello-world takto: 

export class AppComponent {
showMessage() {
const hello = document.getElementById('hello');
hello.innerHTML = '<app-hello-world></app-hello-world>';
}
}

Můžete přejít do prohlížeče a kliknout na tlačítko, ale hned vám řeknu, že se nic nestane. Ale zase když přejdete do nástrojů pro vývojáře prohlížeče a podíváte se tam, uvidíte, že komponenta HelloWorld je vložena.

Důvod, proč komponentu na obrazovce nevidíme, je ten, že Angular nemůže rozpoznat značku app-hello-world, protože byla do šablony vložena dynamicky. Angular potřebuje, aby byly všechny prvky přítomny v šabloně, nebo je třeba použít dynamickou továrnu na komponenty, abyste komponentu instancovali za běhu prostřednictvím kódu.

Tady přichází ke slovu Angular Elements. Pomocí Angular Element stačí dynamicky vložit značku a Angular za nás komponentu sám instancuje. Pojďme se konečně podívat, jak tuto komponentu použít v naší aplikaci. Nejprve pomocí příkazu ng add nainstalujte do naší aplikace prvek Angular: 

$ ng add @angular/elements

Jakmile máte nainstalováno, přejděte na app.module.ts a proveďte následující změny v @NgModule:

import {NgModule, Injector} from '@angular/core';
import {createCustomeElement} from '@angular/elements';
@NgModule({
declarations: ,
imports: ,
entryComponents: ,
providers: ,
bootstrap: 
})

Poté ve třídě AppModule napište funkci constructor, vytvořte novou instanci createCustomElement a předejte jí HelloWorldComponent, jak je uvedeno níže:

export class AppModule {
constructor(injector: Injector) {
const custom = createCustomElement(HelloWorldComponent, {injector: injector});
}
}

Společně s komponentou jí musíme předat také injector. Parametr injector je něco, co používáme k řešení závislostí. Díky tomu jsme vytvořili instanci HelloWorldComponent jako vlastní element. Poté můžeme použít rozhraní API customElements a definovat značku komponenty jako app-hello-world. 

customElements.define('app-hello-world', custom);

Přejděte zpět do souboru hello-world.component.ts a odstraňte/komentujte selector uvnitř sekce @Component. Tímto způsobem nebude Angular zmatený a bude vědět, že má použít vlastní prvek, který jsme právě vytvořili.

Zopakujte příkaz ng serve --open, abyste se ujistili, že Angular převezme všechny změny, které jsme právě provedli.

Je velká pravděpodobnost, že tlačítko stále nezobrazuje HelloWorldComponent. Může to být způsobeno tím, že Angular „nedokáže zkonstruovat prvek HTMLElement“. Chcete-li tento problém vyřešit, nainstalujte polyfill webcomponentjs:

$ yarn add @webcomponents/webcomponentsjs

Poté přejděte do souboru polyfills.ts a importujte následující:

import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js';

Konečně! Náš vlastní prvek se zobrazí na obrazovce, když klikneme na toto tlačítko.

.