Question

0

176

Vistas

Angular: enlace InnerHTML con traducción en el archivo TS

Tengo un problema con el enlace a la propiedad para obtener html y traducirlo.
Tengo un HTML interno que estoy tratando de mapear para traducir.

El problema es que no está traduciendo y mostrando la clave tal como es. PAGS

A continuación se muestra mi código: -

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

No se traduce y se muestra a continuación: - {{'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>

about 4 years ago · Juan Pablo Isaza

1 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Accepted Answer · 2022-06-30T10:08:18.870Z

Por lo tanto, agregar html dentro de un div como lo está haciendo "simplemente" agregará su archivo html, sin ninguna lógica adicional.

Pero la tubería debe compilarse, por lo que deberá hacer lo siguiente para que esto funcione.

Solo escribiré el paso aquí, avíseme si debo proporcionar más información.

Con *ngSi

Cree un componente a partir del html que proporcionó (módulo, componente.ts, componente.html)
Importando este componente quien lo necesite.
Mostrarlo/ocultarlo con un *ngIf .

Con ViewContainerRef

Cree un componente a partir del html que proporcionó (módulo, componente.ts, componente.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 {}

Agregue la identificación donde la necesite

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

obtenga este elemento a través del archivo where-you-use-it.component.ts .

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

Agregue el elemento deseado con el método ViewContainerRef createComponent()

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

No olvide agregar fooBarModule dentro de where-you-use-it.module.ts

Adicional

Si está tratando de crear una "superposición"

Luego elegiría la solución *ngIf y la agregaría a su archivo app.component.html , justo después de la etiqueta <router-outlet>

0

176