有没有办法在Angular 4中使用"模板引用变量"？

Question

我试图找出如何在.pug模板中使用模板引用变量.

例如:div(#var)将抛出错误:

compiler.es5.js:1694 Uncaught Error: Template parse errors: There is no directive with "exportAs" set to "#var" (" ... 

原因是哈巴狗会呈现为:

<div #var="#var"> ...

然后Angular会失败.

Answer 1

来自doc:

模板引用变量(#var)

模板引用变量通常是对模板中DOM元素的引用.它也可以是对Angular组件或指令或Web组件的引用.

所以,你只需要<div #var >,#var var在这个<div>元素上声明一个变量.

在大多数情况下,Angular将引用变量的值设置为声明它的元素.... 但是指令可以更改该行为并将值设置为其他值,例如它自己.NgForm指令就是这样做的

如果在模板引用变量中指定了某些内容,则它应该是指令或组件,例如:#var="ngForm"哪个ngForm是内置指令.

这就是你收到错误的原因: There is no directive with "exportAs" set to "#var"

因为#var(你指定的:)<div #var="#var">不是组件也不是指令,

现在对于jade(pug),如果你想要一个null属性,你应该将编译器设置为编译为HTML doctype,因为pug的默认行为是设置一个属性值,该属性值与属性上的名称相同:

默认行为:

div(#var) 编译为: <div #var="#var"></div>

div(hidden) 编译成 <div hidden="hidden"></div>

使用doctype html:

div(#var) 编译为: <div #var></div>

div(hidden) 编译成 <div hidden></div>

或者你可以放入文件的开头:doctype html对于你想要的每个文件.