Question

文件夹结构：

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

shared.module.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}}

Answer 1

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

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

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

1 个答案: