我在系結到屬性以獲取 html 并對其進行翻譯時遇到問題。
我有一個要映射以翻譯的 innerHTML。
問題是它沒有按原樣翻譯和顯示密鑰。磷
以下是我的代碼：-
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>
uj5u.com熱心網友回復：
因此，像您正在做的那樣在 div 中添加 html 將“只是”將您的 html 檔案添加到其中，而無需任何進一步的邏輯。
但是管道需要編譯，因此您需要執行以下操作才能完成此作業。
我只是在這里寫步驟，如果我應該提供更多資訊，請告訴我
使用 *ngIf
- 從您提供的 html 中創建一個組件（module、component.ts、component.html）
- 將這個組件匯入您需要的任何人。
- 用 . 顯示/隱藏它
*ngIf。
使用 ViewContainerRef
- 從您提供的 html 中創建一個組件（module、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
createComponent()使用 ViewContainerRef方法將希望的元素添加到其中
this.loaderContainer.createComponent(fooBarComponent)
// This will be at the same place where you initially intended to add the div
- 不要忘記在里面添加 fooBarModule
where-you-use-it.module.ts
額外的
如果您嘗試創建“orverlay”
然后我會使用 *ngIf 解決方案并將其添加到您的app.component.html檔案中，就在<router-outlet>標簽之后
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/468437.html
標籤：javascript 有角度的 ngx-翻译