Angular5 访问共享组件中的共享管道

Anoop 发表于 Dev

阿诺普

文件夹结构：

src
  app
    post
    shared
      layout
        sidebar.component.ts
        sidebar.component.html
      shared.pipe.ts
      shared.module.ts

共享模块.ts

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    HttpModule,
    RouterModule,
    ],
  declarations: [
    TimeAgoPipe,
    ProfileImagePipe,
    RoundPipe,
    ListErrorsComponent,
    HeaderNavComponent,
    FileUploadComponent,
    SidebarComponent,
    ShowAuthedDirective
  ],
  exports: [
    TimeAgoPipe,
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    HttpModule,
    RouterModule,
    ListErrorsComponent,
    RoundPipe,
    TranslateModule,
    NgxCarouselModule,
    HeaderNavComponent,
    FileUploadComponent,
    SidebarComponent
  ]
})
export class SharedModule {}

sidebar.component.html

<li class="active list-title">
                  <a href="#">
                      <i class="pe-7s-graph"></i>
                      <p>{{'Groups'|translate}}</p>
                  </a>
              </li>
              <li>
                <a href="#">
                    <i class="pe-7s-user"></i>
                    <p>{{'Join Group'|translate}}</p>
                </a>
               </li>                      
              <li>

目前我收到这样的错误

compiler.js:486 未捕获的错误：模板解析错误：找不到管道“翻译”（“

{{[ERROR ->]'Groups'|translate}}

萨吉塔兰

您必须仅导出组件和提供程序而不是模块，在模块下添加 TranslateModule 并从导出中删除模块，并且只有导入模块部分。

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    HttpModule,
    RouterModule,
    ],
  declarations: [
    TimeAgoPipe,
    ProfileImagePipe,
    RoundPipe,
    ListErrorsComponent,
    HeaderNavComponent,
    FileUploadComponent,
    SidebarComponent,
    ShowAuthedDirective
  ],
  exports: [
    TimeAgoPipe,
    ListErrorsComponent,
    HeaderNavComponent,
    FileUploadComponent,
    SidebarComponent
  ]
})

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。