Как стилизовать большие динамические текстовые строки в Angular?

Question

В настоящее время я использую API HomeAway, который возвращает важное свойство, которое я должен включить в свое приложение.Это описание, которое содержит ключевые сведения о перечне аренды, который будет видеть пользователь.

Задача: Это описание отправляется в виде одного большого блока текста.

Этот блок содержит различные детали, которые действительно должны быть визуально разделены и стилизованы, чтобы сделать его читабельным.

Мой вопрос: Есть ли какой-нибудь элегантный способ стилизовать потенциально большие блокидинамический текст?

---

Пример

Текст возвращается так (значительно сокращен для здравомыслия):

Ваш ультра-Современный умный дом обещает абсолютную роскошь в самом сердце Голливуда.Просторная трехэтажная планировка включает в себя стеклянную винтовую лестницу и стильный задний двор с гидромассажной ванной и шторами.О ДОМЕ Прохладная атмосфера середины века восхищает в гостиной открытой планировки, где диван и два кресла смещают яркие белые стены.Управляйте всем, от света до жалюзи от планшета в обеих спальнях.Кроме того, в распоряжении гостей стиральная и сушильная машины из нержавеющей стали и бесплатный Wi-Fi.Парковка на улице.Дом по соседству также доступен для размещения больших вечеринок.РАСПОЛОЖЕНИЕ В нескольких минутах ходьбы от деревни Ларчмонт и в нескольких минутах езды от всех классических голливудских достопримечательностей, этот уникальный дом находится именно там, где вы хотите быть.Заправьтесь вегетарианской едой и свежевыжатыми соками в Cafe Gratitude менее чем за 1 квартал.В нескольких шагах от отеля Osteria Mamma находится восхитительный итальянский ресторан и винный бар, в котором вы ищете романтический ужин.ЧТО ОЖИДАЕТСЯ ОТ НЕДВИЖИМОСТИ, УПРАВЛЯЕМОЙ В АРЕНДУ ОТДЫХАМИ TURNKEY TurnKey Vacation Rentals - ведущая компания по управлению имуществом с полным комплексом услуг.Мы гарантируем, что вся информация листинга является точной и актуальной.С момента бронирования вам будут предоставлены своевременные и полезные сообщения о вашей поездке.По прибытии вы легко получите доступ к своему устройству с помощью безопасного кода двери без ключа;нет необходимости в личном обмене ключами.

В идеале

Ваш ультрасовременный умный дом обещает абсолютную роскошь в самом сердце Голливуда.Просторная трехэтажная планировка включает в себя стеклянную винтовую лестницу и стильный задний двор с гидромассажной ванной и шторами.

О ДОМЕ

Прохладная атмосфера середины века восхищает в гостиной открытой планировки, где диван и два кресла смещают яркие белые стены.Управляйте всем, от света до жалюзи от планшета в обеих спальнях.Кроме того, в распоряжении гостей стиральная и сушильная машины из нержавеющей стали и бесплатный Wi-Fi.Парковка на улице.Дом по соседству также доступен для размещения больших вечеринок.

РАСПОЛОЖЕНИЕ

В нескольких минутах ходьбы от деревни Ларчмонт и в нескольких минутах езды от всех классических голливудских достопримечательностей, этот уникальный дом находится именно там, где вы хотите быть.Заправьтесь вегетарианской едой и свежевыжатыми соками в Cafe Gratitude менее чем за 1 квартал.В нескольких шагах от отеля Osteria Mamma находится восхитительный итальянский ресторан и винный бар, в котором вы ищете романтический ужин.

ЧТО ОЖИДАЕТСЯ ОТ НЕДВИЖИМОСТИ, УПРАВЛЯЕМОЙ В АРЕНДУ ОТДЫХОМ В ТУРЦИИ

TurnKey Vacation Rentals - ведущая компания по управлению имуществом с полным комплексом услуг.Мы гарантируем, что вся информация листинга является точной и актуальной.С момента бронирования вам будут предоставлены своевременные и полезные сообщения о вашей поездке.По прибытии вы легко получите доступ к своему устройству с помощью безопасного кода двери без ключа;нет необходимости в личном обмене ключами.

---

Вы можете видеть, что детали предметов полностью заглавными.Я склонен создавать собственный канал, который обнаруживает полностью прописные слова.Тем не менее, предметы не просто одно слово, а часто много.И даже после их обнаружения, как бы я стилизовал DOM из канала для форматирования текста?

Я слишком усложняю это?Есть что-то очевидное, чего мне не хватает?Я спрашиваю, потому что это кажется довольно распространенной проблемой с абстрактными решениями.Любые предложения о современном способе сделать это?

Любая помощь высоко ценится. Спасибо, что заглянули ...

Answer 1

После попытки сделать это с трубкой, стало ясно, что, вероятно, это не сработает. Но я смог заставить его работать другим методом .Я вернусь и объясню, что происходит через некоторое время (мне нужен перерыв), но вот немного пищи для размышлений.

Ваши вызовы

• Поиск заголовков -На самом деле найти их можно было бы с помощью регулярных выражений, но вы столкнетесь с некоторыми проблемами, связанными с тем, что некоторые абзацы начинаются с буквы A, которая в конечном итоге помечается чем-то простым, например, (([A-Z]{1,} ){1,}). Это то, что вы можете объяснить , но я изначально отказался от этого метода.В ретроспективе (20/20, вы знаете) это может закончиться использованием меньшего количества кода, если вы пойдете по этому пути.
• Стилизация ваших заголовков
  • Поскольку это всего лишь строка текста, вам в основном требуетсядобавьте HTML в строку , если вы не разделите тело и текст и не будете использовать ngFor и ngIf некоторым (сложным) образом .
  • Если вы решите добавить HTML к тексту (как я это сделал), вам нужно будет создать пустой элемент , который будет содержать ваш текст, а затем изменить его innerHTML на конечный текст.
  • Этим вы подчиняетесь использованию встроенного стиля или задаете encapsulation: ViewEncapsulation.None в компонентном декораторе .Это означает, что Angular не использует Shadow DOM для компонента, , подробнее о котором вы можете прочитать здесь .

Answer 2

Если ваш текст получается в том же формате, что и в идеале, тогда вы можете просто использовать тег p и применить css к тегу p: white-space: pre-wrap;