[...]="..."
用于对象绑定 ...="{{...}}"
用于字符串插值绑定。如果你想绑定一个字符串,那么使用什么并不重要。如果你想绑定一个对象或数组值,你需要使用`[...] =“...”。除此之外,这完全取决于你。
<img class="logo" src="../app/media/appLogo.png">
与 Angular2 完全无关,那只是纯 HTML(没有
[]
也没有 {{}}
)。如果您在 []
周围添加 src
,那么 Angular 会将 ../app/media/appLogo.png
视为表达式,但显然不是。
当使用 DomSanitizer 时,
[src]="..."
是强制性的,因为该值不再是字符串,而是一个对象,并且使用 {{}}
会以无效的方式对其进行字符串化。
使用常规
src
设置属性,其中设置 [src]
设置属性。考虑到对于图像(我假设您正在谈论图像但您没有说), src
属性用于设置相应的属性,它们都将起作用。
使用
[src]
有一个重要原因。浏览器往往会在解析 html 时开始下载您放入 src
属性中的任何内容。假设你这样做:
<img src="{{myImgSrc}}"/>
浏览器通常会立即开始下载
{{myImgSrc}}
,这将导致控制台中出现 404。因此使用以下内容会稍微好一些:
<img [src]="myImgSrc"/>
如果您有静态锚链接,请继续
<img class="logo" src="../app/media/appLogo.png">
从组件绑定时,以下任一方法都可以工作。
<img class="logo" [src]="image_src">
<img class="logo" src="{{ image_src }}">
在组件.ts中
image_src: string = '../app/media/appLogo.png';
**
** https://dev.to/ngconf/the-true-difference- Between-and-bindings-in-angular-2h9i