使用Angular 2的Jade / Pug - 如何解决与＃syntax的冲突？

Question

玉石输入

div(#menu class="ui dropdown icon item")

Html输出

<div #menu="#menu" class="ui dropdown icon item">

#menu =“＃menu” 错误，我期待的输出只是 #menu

<div #menu class="ui dropdown icon item">

问题：

Angular的template reference variables与玉的#idname syntax发生冲突。

版本信息：

• Jade 1.11.0
• Angular 2 rc4

Answer 1

您通常应该能够通过明确告诉Jade编译器HTML5 doctype来修复它：

UNIT=0

Answer 2

根据documentation

  

不喜欢使用＃字符的人可以使用其规范替代品ref-prefix。例如，我们可以使用#phone或ref-phone声明我们的手机变量。

<!-- phone refers to the input element; pass its 'value' to an event handler -->
<input #phone placeholder="phone number">
<button (click)="callPhone(phone.value)">Call</button>

<!-- fax refers to the input element; pass its 'value' to an event handler -->
<input ref-fax placeholder="fax number">
<button (click)="callFax(fax.value)">Fax</button>

在您的情况下，使用ref-menu代替#menu

BTW @dfsq解决方案适用于doctype html：

div(#menu class="ui dropdown icon item")

但是这会引发错误（ #menu属性后class ）：

div(class="ui dropdown icon item" 
        #menu [routerLinkActive]="['router-link-active']" 
        [routerLinkActiveOptions]="{exact:true}"
)

所以你需要用逗号划分属性：

div(class="ui dropdown icon item", 
    #menu,
    [routerLinkActive]="['router-link-active']",
    [routerLinkActiveOptions]="{exact:true}"
)

或者更好的角度方式：

  

插值以外的绑定类型在等号的左边有一个目标名称，或者用标点符号（[]，（））包围，或者以前缀（bind-，on-，bindon - ）开头。