Angular 5 (и более): HTMLЭлемент с @ViewChild

#html #angular #angularjs-directive #formio

#HTML #angular #angularjs-директива #formio

Вопрос:

Я должен ссылаться на htmlElement с помощью @ViewChild() , есть ли какой-нибудь способ для этого? Я должен создать HTMLElement, а затем попытаться назначить ссылку на viewChild или что-то подобное. Спасибо за ваше внимание.

Комментарии:

1. Можете ли вы подробнее описать, чего вы пытаетесь достичь, пытаетесь ли вы создать этот HTMLElement динамически или он уже присутствует в dom?

2. Покажите свой код @j Doe, чтобы мы могли вам помочь!! 🙂

3. Я пытаюсь определить пользовательский компонент formio, и мне нужно определить шаблон для отображения в моем пользовательском компоненте с помощью «document.createElement(…)», потому что регистрация моего пользовательского компонента в formio не позволяет мне отображать шаблон, который я определил в «templateUrl», и мне нужно ввести некоторую переменную в мой шаблон

Ответ №1:

Я пришел сюда в поисках способа получить HTMLElement из ViewChild , который выбирает дочерний компонент. Я понимаю, что это не совсем то, о чем идет речь. Тем не менее, это может быть полезно.

Этого можно достичь, используя read опцию внутри ViewChild.opts :

 <my-child-component #mySelector></my-child-component>
  
 @ViewChild('mySelector', {read: ElementRef})
childElement: ElementRef<HTMLElement>;

doSomething() {
  const htmlElement = childElement.nativeElement;
}
  

Ответ №2:

Это не так просто. ViewChild следует использовать для:

  • любой класс с компонентом или декоратором директивы

  • ссылочная переменная шаблона в виде строки (например, запрос с ViewChild(‘cmp’))

  • любой поставщик, определенный в дереве дочерних компонентов текущего компонента (например, ViewChild(SomeService) SomeService: SomeService)

  • любой поставщик, определенный через строковый токен (например, ViewChild(‘someToken’) someTokenVal: any)

  • ссылка на шаблон (например, запрос с шаблоном ViewChild(TemplateRef);)

В вашем случае лучше использовать последний вариант:

 <input #testInput >
  

TS:

 ...
@ViewChild('testInput') input;
...
  

Комментарии:

1. Не совсем, вы также можете ссылаться на обычные HTML-элементы.

2. @ViewChild — не описывает способ предоставления простого htmlэлемента в виде @ViewChild

3. @NorthHalcyon — ViewChild может ссылаться на HTML-элемент с помощью ссылочной переменной шаблона.

4. — любой класс с компонентом или декоратором директивы — ссылочная переменная шаблона в виде строки (например, запрос <my-component #cmp></my-component> с ViewChild(‘cmp’)) — любой поставщик, определенный в дереве дочерних компонентов текущего компонента (например, ViewChild(SomeService) SomeService: SomeService) — любой поставщик, определенный через строковый токен (например, ViewChild(‘someToken’) someTokenVal : any) — ссылка на шаблон (например, запрос <ng-template></ng-template> с шаблоном ViewChild(TemplateRef);) — какой из них?

5. Элемент с переменной ссылки на шаблон. Вы можете увидеть пример в разделе «Элементы DOM» этой статьи .