Ich habe eine benutzerdefinierte Pipe namens 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;
}
}
Ich muss dies in zwei verschiedenen Modulen verwenden, Module1
und Module2
.
Beim Importieren in Module1
und Module2
wird die Fehlermeldung angezeigt, dass es in einem übergeordneten Modul deklariert werden soll.
Also erkläre ich das Rohr im 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 { }
Aber wenn ich es benutze Module1
, wird ein Fehler ausgegeben
Die Pipe 'currConvert' wurde nicht gefunden
quelle
import { NgModule } from '../../../../node_modules/@angular/core';
Sie können Freigabemodule verwenden, um Ihren Dienst, Ihre Direktive, Ihre Pipes und Ihre Komponenten freizugeben
Sie müssen ein Modul erstellen und die Pipes, Direktiven, Dienste oder Komponenten importieren und die Deklaration, den Export und die Anbieter für die Dienste festlegen.
Importieren Sie das Freigabemodul an einen beliebigen Ort und verwenden Sie es.
Grundsätzlich werden Pipes und Direktiven in NgModules-Metadaten deklariert und exportiert. Für Dienste definieren Sie forRoot, das die Anbieter zurückgibt, um auf andere Module zuzugreifen.
shareModule.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 ] }; } }
my-module1.module.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 {}
Wie weise können Sie auch in anderen Modulen tun.
quelle
Sie sollten ein Modul erstellen, dh
SharedModule
Ihre Pipe dort deklarieren. Dann sollten Sie Pipe-In exportierenSharedModule
und IhreSharedModule
in beidenModule1
und importierenModule2
. Es gibt einen großartigen Artikel in Angulars Dokumenten: https://angular.io/docs/ts/latest/guide/ngmodule.html#!#shared-modulequelle
Module1
undModule2
, daher wird Pipe in diesen Modulen nicht importiert. Wenn Sie importierenSharedModule
inModule1
dann Rohr wird in importiertSharedModule
und exportiert inModule1
Wenn Sie eine Pipe mithilfe der CLI für ein freigegebenes Modul generieren, müssen Sie die Pipe manuell zur Liste "Exporte" hinzufügen. Mein Pipe-Fehler wurde im Browser angezeigt, bis ich die Pipe als Export in mein freigegebenes Modul hinzufügte, in das ich sie importiert / deklariert habe.
quelle
Angenommen, Sie haben diese Struktur:
Wenn Sie DatesPipeModule in DateComponentModule verwenden.
Deklarieren und exportieren Sie DatesPipe in DatesPipeModule
Importieren Sie jetzt DatesPipeModule direkt in DateComponentModule.
DatesPipeModule.ts
import { DatesPipe} from './{your-path}'; @NgModule({ imports: [], declarations: [ DatesPipe ], exports: [ DatesPipe ] }) export class DatesPipeModule{}
DateComponentModule.ts
import { DatesPipeModule} from './{your-path}'; @NgModule({ imports: [DatesPipeModule], declarations: [], exports: [] }) export class DatesPipeModule{}
Sie können es auch exportieren
SharedModule
und importieren, esDatesComponentModule.ts
wird jedochSharedModule
nicht vor Pipes geladen, sodass ein Fehler ausgegeben wird.quelle