parametros - observable angular 4 ejemplo

¿Cómo declarar la tubería globalmente para usarla en diferentes módulos?

Question

Ahora tengo un tubo personalizado creado llamado 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;
}
}

Necesito usar esto en dos módulos diferentes,

(i) Module1
(ii) Module2

Cuando importo en el Módulo 1 y el Módulo 2, aparece un error que dice que debe declararse en un módulo de nivel superior.

Así lo he declarado dentro de la 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 { }

Pero cuando lo uso en el Módulo 1, se produce un error. No se pudo encontrar la tubería ''currConvert''

Answer 1

Debe crear un módulo, es decir, SharedModule y declarar su canalización allí. Luego, debe exportar la canalización en SharedModule e importar su SharedModule tanto en el SharedModule en el SharedModule . Hay un gran artículo en los documentos de Angular: https://angular.io/docs/ts/latest/guide/ngmodule.html#!#shared-module

Answer 2

En Angular, una buena técnica para compartir directivas, componentes, tuberías, etc. comunes es utilizar el llamado módulo compartido .

Esos módulos declaran y exportan partes comunes, para que sean utilizables para cualquiera de sus otros módulos.

La sección de fundamentos de la documentación angular es una muy buena lectura acerca de los módulos compartidos.

Tomemos como ejemplo su currConvert .

• Declare nuevo NgModule llamado ApplicationPipesModule
• Agregue la canalización a las matrices de declarations y exports de NgModule metadata
• Agregue los módulos que puedan ser necesarios para que su tubería funcione en la matriz de imports

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

aplicacion-pipe.module.ts

• importe el módulo ApplicationPipesModule creado en los módulos donde se usará su canalización, agregándolo a la matriz de imports

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

mi-módulo1.módulo.ts

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

my-module2.module.ts

EDIT: Texto de respuesta mejorada y ejemplo.

Answer 3

Puede usar los módulos compartidos para compartir su servicio, directivas, tuberías, componentes

debe crear un módulo e importar las canalizaciones, directivas, servicios o componentes y establecer la declaración, exportación y proveedores para los servicios.

Importa el módulo de compartir en donde quieras y úsalo.

Básicamente tuberías y directivas declaradas y exportadas en metadatos de NgModules. para servicios, defina forRoot que hace que los proveedores accedan a otros módulos.

• 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 ]
  };
  }
  }

• mi-módulo1.módulo.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 {}

Como sabio podéis hacer también en otros modos.