Estoy agregando diapositivas virtuales a mi swiper con swiper.js. La matriz que contiene las diapositivas, de acuerdo con los ejemplos, usa cadenas como las siguientes (los documentos dicen diapositivas: cualquiera, pero probé un componente y otras cosas, pero nada más funcionó):
virtual: { // cache: true, slides: (function() { const slides = []; for (let i = 0; i < 1; i += 1) { slides.push('<img src="https://picsum.photos/600/600/?image=1/>'; } return slides; })() },Problema : quiero usar un componente personalizado 'tarjeta de miembro de la aplicación' como mi diapositiva en lugar de una cadena, así que lo agrego como una cadena como la siguiente, pero cuando se muestra en la pantalla no se interpola/transpila/compila /render/etc el código de componentes o HTML, el depurador muestra la cadena que le pasé.
Me gustaría hacer esto:
slides.push('<app-member-card class="router-link" [MemberCard]="member"></app-member-card>');
Donde esto a continuación es lo que vería en la pantalla:
<div class="card member-card"> <div class="row">...other tags left out here for verbosity</div> </div>Pregunta : ¿Hay algo que pueda hacer en Angular o swiper.js que traduzca esta cadena en el componente al agregarlo como una diapositiva? No pude encontrar nada en el documento de Swiper y no estaba tan familiarizado con todas las cosas de Angular.
Lo que probé : intenté crear dinámicamente el componente en mi archivo .ts y agregar las propiedades, pero cuando intento extraer el HTML interno como una cadena de viewContainerRef, todos los datos están vacíos. Aquí está mi enlace a esa publicación en SO
Estás exagerando. Hay una razón para que sea "tan difícil" en Angular inyectar HTML en él.
La respuesta que le di en la otra pregunta debería ser suficiente para cumplir con el resultado deseado. Sin embargo, el mejor enfoque sería NO almacenar HTML. En su lugar, almacene lo que se necesita para que se represente app-member-card .
Algo parecido a esto:
export interface IMemberCard{ id: number; url: string; wSize: number; hSize: number; } ... virtual: { // cache: true, slides: (function() { const slides: Array<IMemberCard> = []; for (let i = 0; i < 1; i += 1) { slides.push({ id: i + 1; url: 'https://picsum.photos', wSize: 600, hSize: 600 }); } return slides; })() }, Luego, en su HTML, puede representar app-member-card directamente:
<div class="row" *ngFor="let slide of slides"> <app-member-card class="router-link" [MemberCard]="slide"></app-member-card> </div>Así es como se debe usar Angular, el hacky-thing que publiqué en la otra pregunta está bien para usarse siempre que no le importe la mantenibilidad. El código genérico/dinámico puede ensuciarse muy rápido.