Angular

Question

我在绑定到属性以获取 html 并进行翻译时遇到问题。
我有一个内部HTML，我正在尝试映射以进行翻译。

问题是它没有按原样翻译和显示密钥。 P

下面是我的代码：-

let popupContainer = document.createElement('div');
popupContainer.innerHTML = require('html-loader!../html/myPopup.html').default;
popupContainer.addEventListener('click', clickEventHandler);
document.body.appendChild(popupContainer);

它不会翻译并显示如下：- {{'fileverse-name-label' | translate}}

HTML :-

<div class="book__filters">
  <hr />
  <form class="my____form flex-row" id="filterForm">
    <div class="me-3 col-md-3 checker__filters--field">
      <label for="fileName" class="band__form--label">{{'fileverse-name-label' | translate}}</label>
      <input
        type="text"
        class="drese__form--input colrs__filters--input"
        placeholder="Search for a file verse"
        name="fileverse"
        id="fileverse"
      />
    </div>
    <div class="me-3 col-md-3 runner__filters--field">
      <label for="chapterLabel" class="chapter__form--label">{{'chapter-label' | translate}}</label>
      <select
        class="chapter__form--input geeze__filters--input"
        name="chapterLabel"
        id="chapterLabel"
      ></select>
    </div>
  </form>
  <hr />
</div>

Answer 1

因此，像您所做的那样在 div 中添加 html 将“只是”将您的 html 文件添加到其中，没有任何进一步的逻辑。

但管道需要编译，因此您需要执行以下操作才能完成此工作。

我就把步骤写在这里，如果我需要提供更多信息请告诉我

使用 *ngIf

根据您提供的 html 创建一个组件（模块，component.ts，component.html）
任何需要的人都可以导入这个组件。
Show/Hide 它带有 *ngIf.

使用 ViewContainerRef

根据您提供的 html 创建一个组件（模块，component.ts，component.html）

// component.ts
@Component({
  selector: 'foo-bar',
  templateUrl: '../foo-bar.component.html', // File where you've added the html
})
export class fooBarComponent {
  // ...
}

// module.ts
@NgModule({
  declarations: [fooBarComponent],
  imports: [
    CommonModule,
    TranslateModule.forChild()
  ],
  exports: [fooBarComponent],
})
export class fooBarModule {}

在需要的地方添加id

<ng-template #loaderContainer></ng-template>

通过 where-you-use-it.component.ts 文件获取此元素。

@ViewChild('loaderContainer', { read: ViewContainerRef, static: true })
  loaderContainer: ViewContainerRef

使用 ViewContainerRef createComponent() 方法向其中添加所需的元素

this.loaderContainer.createComponent(fooBarComponent)
// This will be at the same place where you initially intended to add the div

不要忘记在 where-you-use-it.module.ts

额外

如果您正在尝试创建“orverlay”

然后我将使用 *ngIf 解决方案并将其添加到您的 app.component.html 文件中，就在 <router-outlet> 标记

之后

Angular - 将 InnerHTML 与 TS 文件中的翻译绑定

Angular - bind InnerHTML with translate in TS file

javascript

ngx-translate

使用 *ngIf

使用 ViewContainerRef

额外