有没有办法在Angular 4中使用“模板引用变量”?

前端之家收集整理的这篇文章主要介绍了有没有办法在Angular 4中使用“模板引用变量”?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图找出如何在.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会失败.

解决方法

doc

Template reference variables ( #var )

A template reference variable is often a reference to a DOM element
within a template. It can also be a reference to an Angular component
or directive or a web component.

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

In most cases,Angular sets the reference variable’s value to the
element on which it was declared…. But a directive can change that
behavior and set the value to something else,such as itself. The
NgForm directive does that

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

这就是为什么你得到一个错误:没有指令“exportAs”设置为“#var”

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

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

默认行为:

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

div(隐藏)编译为< div hidden =“hidden”>< / div>

使用doctype html:

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

div(隐藏)编译为< div hidden>< / div>

或者你可以把文件的开头:doctype html放到你想要的每个文件中.

猜你在找的Angularjs相关文章