在TS文件中用平移角绑定InnerHTML

Question

绑定到属性以获取html并翻译它时，我遇到了问题。

我有一个innerHTML，我正在试图映射来翻译。

问题是它不是像原来那样翻译和显示密钥。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文件添加到其中，而不需要任何进一步的逻辑。

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

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

与**

component.html)

• Importing

• 从您提供的html中创建一个组件(模块、component.ts、无论您需要哪个组件都可以使用它。

用ViewContainerRef

使用您提供的html创建一个组件(模块、component.html)、component.ts )

// 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 {}

1. 将id添加到需要它的地方

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

1. 通过where-you-use-it.component.ts文件.

获取该元素。

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

1. 使用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中的

1. 不要忘记添加fooBarModule

附加内容

如果你想创建一个"orverlay“

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