Question

我正在使用pug编写Angular2应用程序。我有两个版本的模板，我的HTML工作，但我的帕格不会有人看到我错过了...

// 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');
  }
}

我为哈巴狗所犯的错误是......

Unhandled Promise rejection: Template parse errors:
Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.) (" #main\u003E\u003Ch1\u003EMy Angular App\u003C\u002Fh1\u003E\u003C\u002Fdiv\u003E";;return pug_html;}[ERROR ->]"): AppComponent@0:221
Invalid ICU message. Missing '}'. (" #main\u003E\u003Ch1\u003EMy Angular App\u003C\u002Fh1\u003E\u003C\u002Fdiv\u003E";;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.) (" #main\u003E\u003Ch1\u003EMy Angular App\u003C\u002Fh1\u003E\u003C\u002Fdiv\u003E";;return pug_html;}[ERROR ->]"): AppComponent@0:221
Invalid ICU message. Missing '}'. (" #main\u003E\u003Ch1\u003EMy Angular App\u003C\u002Fh1\u003E\u003C\u002Fdiv\u003E";;return pug_html;}[ERROR ->]"): AppComponent@0:221

Answer 1

我不知道什么是哈巴狗或它是如何工作的，但是如果它在运行时将HTML添加到DOM它将无法工作。 Angular不会在DOM中处理HTML，它只处理其模板。 { "message" => "255.254.230.10 - - [11/Dec/2013:00:01:45 -0800] \"GET /xampp/boreal%3A123456/status.php?pretty=true&test=boreal:%3A12345 HTTP/1.1\" 200 3891 \"http://cadenza/xampp/navi.php\" \"Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:25.0) Gecko/20100101 Firefox/25.0\"", "@version" => "1", "@timestamp" => "2013-12-11T08:01:45.000Z", "url_params_hash" => { "pretty" => "true", "test" => "boreal:12345" } }，[propName]="..."，(eventName)="..."或组件和指令选择器只会被Angular2忽略，如果它们是静态添加到模板中的其他任何位置。

将{{}}与jQuery一起使用似乎毫无意义。 @ViewChild()帮助Angular2执行DOM访问，并避免从自定义代码直接访问DOM。如果使用jQuery，避免直接DOM访问的重点就是静音。

您可以注入@ViewChild()

ElementRef

获取对当前组件的host元素的引用，并从那里开始使用jQuery。

Answer 2

帕格/翡翠不允许这样做。但是，您可以将常规html写入.pug文件以获取您正在寻找的行为。你的哈巴狗看起来像这样：

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

Answer 3

在pug文件的顶部添加doctype html。

如何从哈巴狗获取@ViewChild

3 个答案: