Блог

Главная - Вопросы по программированию - Как получить @ViewChild из pug

Как получить @ViewChild из pug

#angular #pug

#angular #pug

Вопрос:

Я пишу приложение Angular2 с использованием pug. У меня есть две версии шаблона, мой HTML работает, но мой Pug не может кто-нибудь увидеть, чего мне не хватает…

 // HTML
<div #main>
    <h1>Test Html</h1>
</div>

//PUG
.app( #main )
    h1 My Angular App

// Component
import { ElementRef, Component, AfterViewInit, ViewChild } from '@angular/core';
declare var $:JQueryStatic;
@Component({
  selector: 'my-app',
  // template: String(require('./app.component.html'))
  template: String(require('./app.component.pug'))
})
export class AppComponent implements AfterViewInit{
  @ViewChild('main') el:ElementRef;
  ngAfterViewInit() {
    $(this.el.nativeElement).css('background-color', 'red');
  }
}

Ошибка, которую я получаю для pug, такова…

 Unhandled Promise rejection: Template parse errors:
Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.) (" #mainu003Eu003Ch1u003EMy Angular Appu003Cu002Fh1u003Eu003Cu002Fdivu003E";;return pug_html;}[ERROR ->]"): AppComponent@0:221
Invalid ICU message. Missing '}'. (" #mainu003Eu003Ch1u003EMy Angular Appu003Cu002Fh1u003Eu003Cu002Fdivu003E";;return pug_html;}[ERROR ->]"): AppComponent@0:221 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors:
Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.) (" #mainu003Eu003Ch1u003EMy Angular Appu003Cu002Fh1u003Eu003Cu002Fdivu003E";;return pug_html;}[ERROR ->]"): AppComponent@0:221
Invalid ICU message. Missing '}'. (" #mainu003Eu003Ch1u003EMy Angular Appu003Cu002Fh1u003Eu003Cu002Fdivu003E";;return pug_html;}[ERROR ->]"): AppComponent@0:221

Ответ №1:

Я не знаю, что такое pug или как он работает, но если он во время выполнения добавляет HTML в DOM, он не будет работать. Angular не обрабатывает HTML в DOM, он обрабатывает только свои шаблоны. [propName]="..." , (eventName)="..." , {{}} или селекторы компонентов и директив просто игнорируются Angular2, если они находятся где-либо еще, кроме статически добавленных в шаблон.

@ViewChild() Совместное использование с jQuery кажется довольно бессмысленным. @ViewChild() позволяет Angular2 выполнять доступ к DOM и избегать прямого доступа к DOM из вашего пользовательского кода. Если вы используете jQuery, весь смысл избегать прямого доступа к DOM отключен.

Вы можете просто ввести ElementRef 

 constructor(private el:ElementRef) { }

чтобы получить ссылку на хост-элемент текущего компонента и начать с jQuery оттуда.

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

1. Pug — это прекомпилятор для HTML, поэтому HTML работает, но pug не понимает pug не понимает <div #main> (или в случае pug div(#main) ). Часть конструктора не отвечает на вопрос. Мне нужно получить доступ к Jquery в элементе, потому что я внедряю библиотеку jquery. Спасибо за попытку помочь!

2. Когда и где он компилируется? На сервере или на клиенте после его загрузки в браузер? Вы можете получить доступ к элементу внутри шаблона из ElementRef того, что вы получаете в конструкторе. $(this.el.nativeElement.querySelector('div')) или подобное.

3. Это проблема с тем, как pug переносит #main, не имеющую ничего общего со стороной ng2. Если только я не могу использовать ViewChild без #main синтаксиса. Извините за путаницу

4. Angular2 распознает #someName только тогда, когда он добавлен статически в шаблон компонента. Когда он добавляется в DOM, Angular вообще не распознает его. Если вы добавите его в шаблон components, он также не будет добавлен в DOM. Angular2 обрабатывает его шаблон компонентов перед добавлением результата в DOM. Привязка Angular и подобные вещи никогда не попадают в DOM.

5. На данный момент я могу использовать конструктор, но в конечном итоге мне понадобится другой, поэтому мне придется проявить творческий подход или найти кого-то, кто знает, как правильно escape в pug

Ответ №2:

Pug / Jade не допускает этого. Однако вы можете записать обычный HTML-код в свой файл .pug, чтобы получить поведение, которое вы ищете. Ваш pug будет выглядеть так:

 //PUG
<div #main class="app">
  h1 My Angular App
</div>

Ответ №3:

Добавьте doctype html в начало файла pug.