Käyttämällä Angular-elementtejä – Miksi ja miten? – Osa 1
Aloittaminen
Aloitetaan luomalla uusi Angular-projekti järjestelmäämme. Tätä varten varmista, että sinulla on asennettuna Angular CLI:n uusin versio. Suorita terminaalissasi seuraava komento:
$ npm install -g @angular/cli
Kun tämä asennus on valmis, voimme luoda sen avulla uuden alkusovelluksen järjestelmäämme näin:
$ ng new angular-app
Sitähän pyydetään tämän jälkeen valitsemaan lisäominaisuudet, jotka haluat mahdollisesti lisätä Angular-projektiisi, kuten reititys ja tyylilomakkeen formaatin tyyppi. Valitse oletusvastaus painamalla Enter/Return-näppäintä.
CLI asentaa tarvittavat Angular-paketit ja riippuvuudet kansioon nimeltä angular-app. Voit tarjoilla tämän sovelluksen selaimelle suorittamalla seuraavat komennot:
$ cd angular-app
$ ng serve --open
// --open flag will open the browser for you
Kuten huomaat, sovelluksessa on jo valmiiksi muutama asia, jotka voimme näyttää näytöllä. Emme kuitenkaan tarvitse niitä. Mene siis takaisin koodieditoriin (minä ❤️ VS Code) ja poista kaikki src/app/app.component.html-tiedoston sisältä ja kirjoita yksi ainoa <h1>-elementti.
<h1>Welcome To Angular Elements!</h1>
Jos katsot tiedostorakennetta, huomaat, että jokainen komponentti angularissa koostuu lukuisista tiedostoista. Pelkästään App-komponenttia varten on .ts-, .html-, .css– ja spec.ts-tiedosto, joka sisältää testit, sekä module.ts-tiedosto. Lisäksi on valinnainen routing.module.ts-tiedosto, jos olisit päättänyt lisätä sovellukseen reititysominaisuuden luodessasi sitä CLI:llä.
Sen sijaan, että kirjoittaisimme kaikki nämä tiedostot komponenteillemme, Angular CLI antaa meille lyhennetyn menetelmän, joka luo nämä tiedostot puolestamme. Käytetään tätä menetelmää luodaksemme HelloWorld-komponentin järjestelmäämme.
$ ng g c HelloWorld
Tämä yksittäinen komento luo hello-world-nimisen kansion app-kansion sisälle. Jos avaat tämän kansion, löydät sen sisältä nämä neljä tiedostoa:
- hello-world.component.css
- hello-world.component.html
- hello-world.component.spec.ts
- hello-world.component.ts
Käytämme vain tiedostoa .html ja tiedostoa .ts. On olemassa lisälippuja, jotka voimme välittää komennolle ng g c. Mutta pitääkseni asiat yksinkertaisina ja ytimekkäinä, en käytä niitä. Tutustu Angular Docs:iin saadaksesi lisätietoja tämän komennon käytöstä.
Tiedoston hello-world.component.ts sisällä näet, että selector on asetettu app-hello-world. Jos siis lisäät tämän app.component.html:een näin:
<h1>Welcome To Angular Elements</h1>
<app-hello-world></app-hello-world>
Tällöin hello-world.component.html:n sisältö näytetään selaimessa.
Alkuasetuksemme on nyt valmis. Aloitetaan Angular-elementtien käyttö.
Komponentin muuntaminen mukautetuksi elementiksi
Juuri nyt meillä on yksinkertainen HelloWorld-komponentti, joka yksinkertaisesti tulostaa näytölle tekstiä. Katsotaanpa, miten voimme lisätä tämän komponentin sovellukseen dynaamisemmalla tavalla. Tätä varten korvataan app-hello-world div:lla ja button:llä. Lisätään myös click-kuuntelija button:n yhteyteen, jotta kun joku napsauttaa painiketta, HelloWorld-komponentti voidaan näyttää. Tämä hoidetaan showMessage()-funktiolla. Mene siis app.component.html-sivulle ja tee nämä muutokset:
<h1>Welcome To Angular Elements</h1>
<div></div>
<button (click)="showMessage()">Display?</button>
Meidän täytyy sitten määritellä showMessage()-funktio app.component.ts-tiedostossa. Tässä käytämme tavallista DOM-manipulaatiota saadaksemme div:n valitsemalla sen id:n hello:n avulla. Sitten sovellamme innerHTML-funktiota lisätäksemme app-hello-world-komponentin näin:
export class AppComponent {
showMessage() {
const hello = document.getElementById('hello');
hello.innerHTML = '<app-hello-world></app-hello-world>';
}
}
Voit mennä selaimeesi ja napsauttaa painiketta, mutta kerron sinulle heti, että mitään ei tapahdu. Mutta sitten taas, jos menet selaimen dev-työkaluihin ja katsot sinne, näet, että HelloWorld-komponentti on lisätty.
Syy siihen, miksi emme näe komponenttia ruudulla, on se, että Angular ei pysty tunnistamaan app-hello-world-tunnistetta, koska se on lisätty dynaamisesti mallineeseen. Angular tarvitsee, että kaikki elementit ovat mallineessa, tai sinun täytyy käyttää dynaamista komponenttitehdasta komponentin instanttisoimiseen ajonaikana koodisi kautta.
Tässä kohtaa Angular Elements tulee kuvaan mukaan. Angular Elementin avulla meidän tarvitsee vain lisätä tagi dynaamisesti, ja Angular itse instantioi komponentin puolestamme. Pääsemme vihdoin katsomaan, miten voimme käyttää tätä komponenttia sovelluksessamme. Käytä ensin komentoa ng add asentaaksesi Angular Elementit sovellukseemme:
$ ng add @angular/elements
Kun tämä on asennettu, siirry kohtaan app.module.ts ja tee seuraavat muutokset kohtaan @NgModule:
import {NgModule, Injector} from '@angular/core';
import {createCustomeElement} from '@angular/elements';
@NgModule({
declarations: ,
imports: ,
entryComponents: ,
providers: ,
bootstrap:
})
Sitten luokassa AppModule kirjoita constructor funktio luo uuden instanssin createCustomElement ja välitä sille HelloWorldComponent kuten alla näkyy:
export class AppModule {
constructor(injector: Injector) {
const custom = createCustomElement(HelloWorldComponent, {injector: injector});
}
}
Komponentin mukana meidän on välitettävä sille myös injector. injector on jotain, jota käytämme riippuvuuksien ratkaisemiseen. Sen avulla olemme luoneet HelloWorldComponent:n instanssin mukautettuna elementtinä. Sen jälkeen voimme käyttää customElements API:ta määrittelemään komponentin tunnisteeksi app-hello-world.
customElements.define('app-hello-world', custom);
Palaa takaisin hello-world.component.ts-tiedostoon ja poista/kommentoi selector @Component-osion sisältä. Näin Angular ei mene sekaisin ja tietää käyttää juuri luomamme mukautettua elementtiä.
Käynnistä ng serve --open-komento uudelleen varmistaaksesi, että Angular ottaa huomioon kaikki juuri tekemämme muutokset.
On hyvin mahdollista, että painike ei vieläkään näytä HelloWorldComponent. Tämä voi johtua siitä, että Angular ”epäonnistuu HTMLElementin rakentamisessa”. Ratkaistaksesi tämän ongelman, asenna webcomponentjs polyfillit:
$ yarn add @webcomponents/webcomponentsjs
Sitten siirry polyfills.ts tiedostoon ja tuo seuraavat:
import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js';
Viimeinkin! Mukautettu elementtimme tulee näkyviin näytölle, kun napsautamme kyseistä painiketta.
