Question

以下文档在在线W3C验证器中解析OK：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>test</title>
  </head>
  <body>
    <ul>
      <li><div style="margin: 0px 0px 1em; padding: 5px; border: 0px; font-size: 13px; width: auto; max-height: 600px; overflow: auto; font-family: Consolas, Menlo, Monaco, &quot;Lucida Console&quot;, &quot;Liberation Mono&quot;, &quot;DejaVu Sans Mono&quot;, &quot;Bitstream Vera Sans Mono&quot;, &quot;Courier New&quot;, monospace, sans-serif; display: block; color: rgb(57, 51, 24); font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(239, 240, 241);">\noindent\makebox[\textwidth]{\includegraphics[width=\paperwidth]{...}}</div>
      </li>
    </ul>
  </body>
</html>

但是以下片段作为Angular2模板合并时会导致TemplateParser失败：

<main>
    <ul>
      <li><div style="margin: 0px 0px 1em; padding: 5px; border: 0px; font-size: 13px; width: auto; max-height: 600px; overflow: auto; font-family: Consolas, Menlo, Monaco, &quot;Lucida Console&quot;, &quot;Liberation Mono&quot;, &quot;DejaVu Sans Mono&quot;, &quot;Bitstream Vera Sans Mono&quot;, &quot;Courier New&quot;, monospace, sans-serif; display: block; color: rgb(57, 51, 24); font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: left; text-indent: 0px; text-transform: none; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(239, 240, 241);">\noindent\makebox[\textwidth]{\includegraphics[width=\paperwidth]{...}}</div>
      </li>
    </ul>
</main>

在最初的用法中，违规节几乎位于文档片段/模板的末尾。错误输出是：

zone.js:388 Unhandled Promise rejection: Template parse errors:
Unexpected closing tag "li" (": rgb(239, 240, 241);">\noindent\makebox[\textwidth]{\includegraphics[width=\paperwidth]{...}}</div>[ERROR ->]</li><li><span style="font-size: 13px;"><span style="font-family: Consolas, Menlo, Monaco, &quot;Luci"): TechnicalNotesComponent@11:10412
Unexpected closing tag "ul" (": rgb(239, 240, 241);"><span style="color: rgb(195, 24, 24);"><br/></span></span></span></span></li>[ERROR ->]</ul></li></ul><div><span style="font-family: monospace, Courier;"><span style="color: rgb(0, 128, 0)"): TechnicalNotesComponent@11:11267
Unexpected closing tag "li" ("(239, 240, 241);"><span style="color: rgb(195, 24, 24);"><br/></span></span></span></span></li></ul>[ERROR ->]</li></ul><div><span style="font-family: monospace, Courier;"><span style="color: rgb(0, 128, 0);"><b"): TechnicalNotesComponent@11:11272
Unexpected closing tag "ul" (" 240, 241);"><span style="color: rgb(195, 24, 24);"><br/></span></span></span></span></li></ul></li>[ERROR ->]</ul><div><span style="font-family: monospace, Courier;"><span style="color: rgb(0, 128, 0);"><br/></"): TechnicalNotesComponent@11:11277
Unexpected closing tag "div" ("material-icons">close</i></div><div class="chip">cheatsheet<i class="material-icons">close</i></div>[ERROR ->]</div></div></div></main>"): TechnicalNotesComponent@11:11645
Unexpected closing tag "div" ("al-icons">close</i></div><div class="chip">cheatsheet<i class="material-icons">close</i></div></div>[ERROR ->]</div></div></main>"): TechnicalNotesComponent@11:11651
Unexpected closing tag "div" ("ns">close</i></div><div class="chip">cheatsheet<i class="material-icons">close</i></div></div></div>[ERROR ->]</div></main>"): TechnicalNotesComponent@11:11657
Unexpected closing tag "main" ("ose</i></div><div class="chip">cheatsheet<i class="material-icons">close</i></div></div></div></div>[ERROR ->]</main>"): TechnicalNotesComponent@11:11663 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors:
Unexpected closing tag "li" (": rgb(239, 240, 241);">\noindent\makebox[\textwidth]{\includegraphics[width=\paperwidth]{...}}</div>[ERROR ->]</li><li><span style="font-size: 13px;"><span style="font-family: Consolas, Menlo, Monaco, &quot;Luci"): TechnicalNotesComponent@11:10412
Unexpected closing tag "ul" (": rgb(239, 240, 241);"><span style="color: rgb(195, 24, 24);"><br/></span></span></span></span></li>[ERROR ->]</ul></li></ul><div><span style="font-family: monospace, Courier;"><span style="color: rgb(0, 128, 0)"): TechnicalNotesComponent@11:11267
Unexpected closing tag "li" ("(239, 240, 241);"><span style="color: rgb(195, 24, 24);"><br/></span></span></span></span></li></ul>[ERROR ->]</li></ul><div><span style="font-family: monospace, Courier;"><span style="color: rgb(0, 128, 0);"><b"): TechnicalNotesComponent@11:11272
Unexpected closing tag "ul" (" 240, 241);"><span style="color: rgb(195, 24, 24);"><br/></span></span></span></span></li></ul></li>[ERROR ->]</ul><div><span style="font-family: monospace, Courier;"><span style="color: rgb(0, 128, 0);"><br/></"): TechnicalNotesComponent@11:11277
Unexpected closing tag "div" ("material-icons">close</i></div><div class="chip">cheatsheet<i class="material-icons">close</i></div>[ERROR ->]</div></div></div></main>"): TechnicalNotesComponent@11:11645
Unexpected closing tag "div" ("al-icons">close</i></div><div class="chip">cheatsheet<i class="material-icons">close</i></div></div>[ERROR ->]</div></div></main>"): TechnicalNotesComponent@11:11651
Unexpected closing tag "div" ("ns">close</i></div><div class="chip">cheatsheet<i class="material-icons">close</i></div></div></div>[ERROR ->]</div></main>"): TechnicalNotesComponent@11:11657
Unexpected closing tag "main" ("ose</i></div><div class="chip">cheatsheet<i class="material-icons">close</i></div></div></div></div>[ERROR ->]</main>"): TechnicalNotesComponent@11:11663
    at DirectiveNormalizer.normalizeLoadedTemplate (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:13712:21)
    at eval (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:13705:53)
    at ZoneDelegate.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:232:26)
    at Zone.run (http://localhost:3000/node_modules/zone.js/dist/zone.js:114:43)
    at http://localhost:3000/node_modules/zone.js/dist/zone.js:502:57
    at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:265:35)
    at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:154:47)
    at drainMicroTaskQueue (http://localhost:3000/node_modules/zone.js/dist/zone.js:401:35)
    at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:339:25)consoleError @ zone.js:388_loop_1 @ zone.js:417drainMicroTaskQueue @ zone.js:421ZoneTask.invoke @ zone.js:339
zone.js:390 Error: Uncaught (in promise): Error: Template parse errors:(…)consoleError @ zone.js:390_loop_1 @ zone.js:417drainMicroTaskQueue @ zone.js:421ZoneTask.invoke @ zone.js:339

我在其他地方读过，由于路由配置不正确，可能会产生类似的错误。我有<base href="/"/>在场，我是否需要返回并了解有关路由的更多信息？

我看到问题的位置非常接近我所谓的特殊字符，这些字符没有被转义，但是W3C解析器，甚至声明一个严格的文档，似乎认为这没关系。我看到了一个不符合要求的解析器吗？

Answer 1

问题是作为Angular 2模板，在完成所有替换和处理之前，代码不一定符合HTML。

https://angular.io/docs/ts/latest/guide/template-syntax.html

在这种情况下，要渲染的Latex代码包含}}序列，它是插值序列的Angular 2 Template结尾，并被解释为这样。人们可以使用{{ '}' }} {{ '}' }}逃脱，但在我的情况下，这种方法导致超过最大插值数。

逐字渲染代码的更好方法是将ngNonBindable指令应用于包含DOM元素。

https://docs.angularjs.org/api/ng/directive/ngNonBindable

Angular2模板解析器在W3C验证的HTML片段上失败

1 个答案: