Передача компонента Angular другому

Я знаю, что об этом уже спрашивали, но я не понимаю этих ответов, если честно. Я хочу сделать что-то простое:

В основном у меня есть это:

<div class = "carousel">
  <ul class = "carousel__track">
     <li ngFor = "let slideHtml of SlidesHTML?" class = "carousel__slide">
       **THIS IS ACTUALLY WHERE I WANT TO PASS ANOTHER HTML COMPONENT**
       i.e: <app-slideHtml>
    </li>
   </ul>
</div>

Я хочу добиться этого в основном, но я не знаю, могу ли я пойти с @Input() html или мне нужно использовать ng-content для этого. Что мне нужно поместить в файл .ts?

Редактировать: я использую директиву ngFor в элементе li, поэтому я могу отображать фактически все слайды. Я не знаю, возможно ли это вообще, я просто хотел посмотреть, смогу ли я на самом деле этого добиться.

Непонятно, чего вы хотите добиться. Вы хотите отображать <app-order-product> для каждого <li>?

Sebastien Servouze 13.05.2022 17:58

Да, я буду отображать разные компоненты для каждого ли, я отредактирую вопрос.

Anthony Acosta 13.05.2022 18:01
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
44
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Да, ты можешь

<li *ngFor = "let slide of slides" class = "carousel__slide">
    <!-- Rename inputName by the actual input name you want-->
    <app-slideHtml [inputName] = "slide.someData"></app-slideHtml>
</li>

Где inputName — это имя @Input в приложение-слайдHtml, а someData атрибут слайда.

В app-slideHtml.component.ts

@Input() inputName: any; // Rename 'inputName' by the actual input name you want

Вы можете передать весь объект вместо некоторых атрибутов, передав slide на вход.

Да, что-то подобное я искал. Спасибо.

Anthony Acosta 13.05.2022 19:17

Другие вопросы по теме