Nano Hash - криптовалюты, майнинг, программирование

Получить текст из тега пользовательского компонента

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

Страница

<detail [content]="content" [image]="'animals.jpg'">
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

.ts-file of component

export class DetailComponent 
{
  @Input() content: Content;
  @Input() image:   string;

  constructor() 
  {

  }
}

Как я могу получить «ul» и его дочерние элементы в коде компонента, чтобы я мог показать его в определенном месте? Передача текста через свойство приведет к потере его структуры.

Я пытался через ElementRef, но я получаю тег деталей только через nativeElement, а не через дочерние элементы.

angular components
14.09.2017

  • «Конкретное место» — например, положение на экране? 14.09.2017

Ответы:


1

Ответ @proti был на правильном пути. Однако, поскольку нужный вам шаблон находится внутри (при условии, что есть закрывающий тег </detail> после тега </ul>),

`<detail><!-- Content Needed --></detail>`

вы должны использовать @ContentChild вместо @ViewChild. Затем вы можете зафиксировать «содержимое» вашего компонента в ловушке жизненного цикла ngAfterContentInit().

Шаблон,

<detail [content]="content" [image]="'animals.jpg'">
 <ul #content>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
 </ul>
</detail>

В классе компонентов

@ContentChild('content') elemRef: ElementRef;

ngAfterContentInit() {
 // treat this.elemRef as a ElementRef type variable and do whatever you want to do with it
}

ElementRef импортируется из @angular/core

14.09.2017

2

Вы можете сделать это так:

Установите переменную в шаблоне HTML для <ul>, например. #myUlVar

Получить его в TS с помощью @ViewChild

<detail [content]="content" [image]="'animals.jpg'">
<ul #myUlVar>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

export class DetailComponent 
{
  @Input() content: Content;
  @Input() image:   string;
  @ViewChild('myUlVar') ul: HTMLElement;
  constructor() 
  {

  }
}

или узнайте больше здесь: http://learnangular2.com/viewChild/

14.09.2017
Новые материалы
Кластеризация: более глубокий взгляд
Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
Как написать эффективное резюме
Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
Частный метод Python: улучшение инкапсуляции и безопасности
Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
Как я автоматизирую тестирование с помощью Jest
Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..