angular - Kuinka ilmoittaa putki globaalisti käytettäväksi eri moduuleissa?

Minulla on mukautettu putki nimeltä CurrConvertPipe

import {Pipe, PipeTransform} from '@angular/core';
import {LocalStorageService} from './local-storage';
@Pipe({name: 'currConvert', pure: false})
export class CurrConvertPipe implements PipeTransform {
  constructor(private currencyStorage: LocalStorageService) {}

  transform(value: number): number {
     let inputRate = this.currencyStorage.getCurrencyRate('EUR');
    let outputputRate = this.currencyStorage.getCurrencyRate(localStorage.getItem('currency'));
    return value / inputRate * outputputRate;
  }
}

Minun täytyy käyttää tätä kahdessa eri moduulissa, Module1 ja Module2.
Kun tuon sen Module1- ja Module2-moduuleissa, saan virheen, joka sanoo, että se pitäisi olla määritelty korkeammalla tasolla olevassa moduulissa.

Joten julistan putken sisälle app.module.ts

import './rxjs-extensions';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CurrConvertPipe } from './services/currency/currency-pipe';
@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        AppRoutingModule,
        Module1,         
        Module2

    ],

    declarations: [
        AppComponent,
        CurrConvertPipe
    ],
    providers: [

    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Mutta kun käytän sitä Module1:ssa, se aiheuttaa virheen

Putkea 'currConvert' ei löydy

Vastaus #1

Angulaarissa hyvä tekniikka yleisten direktiivien, komponenttien, putkien jne. jakamiseen on käyttää niin kutsuttua jaettua moduulia.

Nämä moduulit määrittelevät ja vievät yleisiä osia, jotta niitä voidaan käyttää missä tahansa muussa moduulissasi.

Perusteet-osio Angular-dokumentaatiossa on erittäin hyvä luettava jaettujen moduulien osalta.

Otetaan esimerkiksi sinun currConvert-putkesi.

• Julista uusi NgModule nimeltä ApplicationPipesModule

• Lisää putki declarations- ja exports-taulukoihin NgModule-koristelijan metatiedoissa

• Lisää kaikki moduulit, joita putkesi toimiminen saattaa vaatia, imports-taulukkoon

  // application-pipes.module.ts
  // other imports
  import { CurrConvertPipe } from './{your-path}';
  
  @NgModule({
    imports: [
      // dep modules
    ],
    declarations: [ 
      CurrConvertPipe
    ],
    exports: [
      CurrConvertPipe
    ]
  })
  export class ApplicationPipesModule {}
  

• tuo luotu ApplicationPipesModule-moduuli niihin moduuleihin, joissa putkesi tulee olemaan käytössä, lisäämällä se imports-taulukkoon

  // my-module1.module.ts
  // other imports
  import { ApplicationPipesModule } from './{your-path}';   
  
  @NgModule({
   imports: [
     // other dep modules
     ApplicationPipesModule
   ],
   declarations: [],
   exports: []
  })
  export class MyModule1 {}
  

Vastaus #2

voit käyttää Jakamismoduuleja jakamaan palvelusi, direktiivisi, putkesi, komponenttisi

Sinun täytyy luoda moduuli ja tuoda putket, direktiivit, palvelut tai komponentit sekä asettaa palveluiden deklarointi, vienti ja tarjoajat.

Tuo jakamismoduuli mihin tahansa haluat ja käytä sitä.

periaatteessa putkia ja direktiivejä, jotka on määritelty ja viety NgModulesin metatietoihin. palveluille määritä forRoot, joka palauttaa tarjoajat muiden moduulien käyttöön.

• jaaModuuli.ts

  import { NgModule, ModuleWithProviders } from '@angular/core';
  import { appDirective } from './{your-path}';
  import { appPipe } from './{your-path}';
  import { appService } from './{your-path}';
  
  @NgModule({
    declarations: [
      appPipe,
      appDirective
    ],
    exports: [
      appPipe,
      appDirective
    ]
  })
  export class SharingModule {
    static forRoot(): ModuleWithProviders {
      return {
        ngModule: SharingModule,
        providers: [ appService ]
      };
    }
  }
  

• minu-moduuli1.moduuli.ts

  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  
  import { myComponent } from './{your-path}';
  
  import { SharingModule } from './{your-path}';
  
  @NgModule({
    declarations: [
      myComponent
    ],
    imports: [
      BrowserModule,
      SharingModule.forRoot()  
    ],
  })
  export class AppModule {}
  

Samoin voit tehdä myös muissa moduuleissa.