Angular-kirjaston luominen

kirjoittaja

Tänään luomme uuden uudelleenkäytettävän kirjaston. Jos huomaat luovasi saman komponentin useampaan kuin yhteen sovellukseen (tai haluat jakaa komponenttisi muiden kehittäjien kanssa), sinulla on tarve kirjastolle.

Luo projekti

Käytämme angular cliä kirjaston luurangon luomiseen. Angular cli loi myös public-api.ts-tiedoston my-lib-kansioon. Tämä tiedosto sisältää seuraavat koodirivit,

export * from './lib/my-lib.service';export * from './lib/my-lib.component';export * from './lib/my-lib.module';
Enter fullscreen mode Exit fullscreen mode

Tämä tiedosto määrittelee, mikä on kirjaston käyttäjien käytettävissä (A.K.A public API).

Jos avaat my-lib.component.ts, näet seuraavan koodin: 

import { Component, OnInit } from '@angular/core';@Component({ selector: 'lib-my-lib', template: `<p>my-lib works!</p>`, styles: })export class MyLibComponent implements OnInit { constructor() { } ngOnInit(): void {}}
Enter fullscreen mode Exit fullscreen mode

Tämän yksinkertaisen kirjaston ulostulo my-lib works! ja käytämme selektoria,
<lib-my-lib></lib-my-lib> komponentin kuluttamiseen.

Asenna kirjasto npm-riippuvuutena.

Käyttääksesi mitä tahansa kirjastoa angularissa, sinun täytyy asentaa se paketinhallinnasta, kuten npm. Tässä esimerkissä emme julkaise kirjastoamme npm-paketinhallintaan. Jos haluat oppia, miten julkaista angular-kirjasto, tutustu angular-oppaaseen.

Nyt asennamme my-lib npm-riippuvuutena tiedostosta. Avaa package.json ja lisää "my-lib": "file:projects/my-lib" riippuvuudet-lohkoon, Katso alla oleva koodinpätkä. 

 "dependencies": { ... "@angular/router": "~9.1.4", "rxjs": "~6.5.4", "tslib": "^1.10.0", "zone.js": "~0.10.2", "my-lib": "file:projects/my-lib" }
Enter fullscreen mode Exit fullscreen mode

my-lib on paketin nimi, jonka näet node_modules-kansiossa ja file:projects/my-lib on varsinainen kirjasto. Jos olisimme julkaisseet kirjastomme npm:ään, korvaisimme file:projects/my-lib versionumerolla(0.0.1).

Jos suoritat npm install, huomaat, että node_modules-kansioon on lisätty my-lib. Nyt voimme tuoda kirjaston ja käyttää sitä projektissamme. katso alla oleva koodinpätkä: 

import {MyLibModule} from 'my-lib';@NgModule({ declarations: , imports: , providers: , bootstrap: ,})export class AppModule { }
Enter fullscreen mode Exit fullscreen mode

Nyt kun olemme tuoneet kirjastomoduulin projektiimme, voimme käyttää MyLibComponent. Avaa app.component.html ja korvaa kaikki koodi
<lib-my-lib></lib-my-lib>:llä.

Käynnistä sovellus

Käynnistä npm start tai ng serve käynnistääksesi sovelluksen. Avaa selain ja käy http://localhost:4200, näet my-lib works! näkyvissä.

Onnittelut, olet onnistuneesti luonut angular-kirjaston!!!

Koodi saatavilla githubissa

.

Jätä kommentti