Question

这是我的test.component.html文件：

<div class="my-container">
  <span>{{ 'locations' | translation }}</span>
</div>

这是translation.pipe.ts：

import { Pipe, PipeTransform } from '@angular/core';
import { TranslationsService } from './translations.service';

@Pipe({ name: 'translation' })
export class TranslationPipe implements PipeTransform {
  constructor(private myTranslationsService: TranslationsService) {}

  transform(value: string): string {
    return this.myTranslationsService.get(value);
  }
}

这是test.module.ts文件：

import { TestComponent } from './test.component';
import { Injector, DoBootstrap, NgModule } from '@angular/core';
import { createCustomElement } from '@angular/elements';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
import { TranslationsService } from '../shared/translations.service';
import { TranslationPipe } from '../shared/translation.pipe';

@NgModule({
  declarations: [TestComponent, TranslationPipe],
  imports: [BrowserModule, FormsModule, HttpClientModule],
  entryComponents: [TestComponent],
  providers: [TranslationsService],
  exports: []
})
export class TestModule implements DoBootstrap {
  constructor(private injector: Injector) {

  }

  ngDoBootstrap() {
    const ngElement = createCustomElement(TestComponent, { injector: this.injector, });
    customElements.get('my-test') || customElements.define('my-test', ngElement);
  }
}

当我运行该应用程序时，出现控制台错误，即找不到管道“翻译”！我做错了什么？

Answer 1

尝试导入CommonModule

import {CommonModule} from "@angular/common";

Answer 2

将您的TranslationPipe添加到providers

  providers: [TranslationsService, TranslationPipe],

找不到管道“翻译”

2 个答案: