如何在Angular的父子模块之间共享模块

时间:2019-06-11 00:17:19

标签: angular angular-module

我是Angular的新手。我想使用带有路由和对话框的组件(FuncionariosAlteraSenhaComponent)。但是我无法将组件导入到其他模块中。

我创建了一个shared.module来导入FuncionariosAlteraSenhaComponent,以便在其他模块中使用。这两个模块是AppLogged.module和Funcionarios.module。 AppLogged.module是Funcionarios.module的父级。

Shared.module

library(tidyverse)

mtcars %>%
  select(matches(".*p$|.*t$")) %>% #regex example: ends in "p" or ends in "t"
  summarise_all(mean, na.rm = T)

      disp       hp     drat      wt
1 230.7219 146.6875 3.596563 3.21725

AppLogged.module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FuncionariosAlteraSenhaComponent } from '../features/funcionarios/funcionarios-altera-senha/funcionarios-altera-senha.component';


@NgModule({
  entryComponents:[
    FuncionariosAlteraSenhaComponent],

  declarations: [
    FuncionariosAlteraSenhaComponent
  ],
  imports: [
    CommonModule
  ],
  exports:[
    FuncionariosAlteraSenhaComponent
  ]
})

export class SharedModule { }
@NgModule({

  entryComponents: [AppLogedComponent, PesquisaColaboradorComponent, EfetuarPagamentoComponent,
  PesquisaClienteComponent, PesquisaPedidoComponent, CotacaoVendaComponent, CadastroVeiculoComponent,
  PesquisaVeiculoComponent, CompraComponent, CadastroClienteComponent, SolicitarTransferenciaComponent,
  SaidaTransferenciaComponent, ConfirmarRecebimentoComponent, PesquisaEstoqueComponent,TextoLivreComponent,
  DetalheRecebimentoComponent, PesquisaPedCompraTransfComponent,  EfetuarPagamentosComponent],

  imports: [
    CommonModule,
    MatRadioModule,
    RouterModule,
    HttpClientModule,
    ReactiveFormsModule,
    FormsModule,
    MatFormFieldModule,
    MatInputModule,
    MatTabsModule,
    MatPaginatorModule,
    MatTableModule,
    MatSortModule,
    MatButtonModule,
    MatCheckboxModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MatExpansionModule,
    MatOptionModule,
    MatSelectModule,
    LayoutModule,
    MatToolbarModule,
    MatSidenavModule,
    MatIconModule,
    MatListModule,
    MatAutocompleteModule,
    AppLogedRoutingModule,
    MatDialogModule,
    MatMenuModule,
    NgxCurrencyModule,
    NgxMaskModule.forRoot(),
  ],


  declarations: [AppLogedComponent, MenuSideComponent, HeaderComponent, PesquisaColaboradorComponent,
  EfetuarPagamentoComponent, PesquisaClienteComponent, PesquisaPedidoComponent, CotacaoVendaComponent,
  CadastroVeiculoComponent, PesquisaVeiculoComponent,CompraComponent,CadastroClienteComponent,
  SolicitarTransferenciaComponent, SaidaTransferenciaComponent, ConfirmarRecebimentoComponent,
  PesquisaEstoqueComponent,TextoLivreComponent, DetalheRecebimentoComponent, PesquisaPedCompraTransfComponent,  EfetuarPagamentosComponent],

  exports: [AppLogedComponent],
})

export class AppLogedModule { }

1 个答案:

答案 0 :(得分:0)

您需要将SharedModule添加到importsFuncionariosModule的{​​{1}}数组中,才能访问AppLogedModule。到目前为止,您仅将其添加到FuncionariosAlteraSenhaComponent的{​​{1}}数组中。

此外,您的Angular模块与Angular材质模块紧密结合。理想情况下,您应该为此创建一个单独的模块。像imports这样的东西,会将您正在使用的所有Angular Material模块添加到FuncionariosModuleAppMaterialModule数组中。

然后,您只需将imports模块添加到模块的exports数组中,就可以访问这些材料模块。这将使您的代码更易于管理。

  

PS:另外,您确定要将所有这些组件添加到AppMaterialModule中的imports数组中吗?