在 Angular 中使用啥更好 - src 或 [src]

Posted 2023-03-05

【中文标题】在 Angular 中使用啥更好 - src 或 [src]

【英文标题】：What's better to use in Angular - src or [src]在 Angular 中使用什么更好 - src 或 [src]

【发布时间】：2017-05-16 13:39:35

【问题描述】：

只想问推荐用什么Angular，标准htmlsrc还是Angular[src]？为什么？

编辑：我的 html 组件中有以下代码：

<img class="logo" src="../app/media/appLogo.png">

没事吧？如果没有，我应该如何将其更改为与[src] 一起使用？

Edit2：除了普通的 html src，还有其他更好的方法吗？或者这实际上是最好的解决方案？

【问题讨论】：

我更新了对您的编辑的回答。

【参考方案1】：

[...]="..." 用于对象绑定 ...="..." 用于字符串插值绑定。如果你想绑定一个字符串，你使用什么并不重要。如果你想绑定一个对象或数组值，你需要使用`[...]="..."。除此之外，这完全取决于您。

<img class="logo" src="../app/media/appLogo.png">

根本与 Angular2 无关，这只是普通的 HTML（没有 [] 和 ）。如果你在src 周围添加[]，那么Angular 会将../app/media/appLogo.png 视为一个表达式，而它显然不是。

当使用 DomSanitizer 时，[src]="..." 是强制性的，因为该值不再是字符串，而是一个对象，并且使用 会以无效的方式对其进行字符串化。

【讨论】：

但在大多数情况下我们使用[] 同时绑定到img 标签，为什么会这样？

我猜是因为[] 始终有效（所有组件和属性），而 仅适用于字符串。我更喜欢[]，因为它更突出，并且在这里使用绑定更加明显，如果前缀和后缀是静态的， 可以在值内的某个位置，这使得恕我直言很容易错过。

如果没有要计算的表达式，那么是的。在这种情况下，[] 或 只会导致错误消息。

“更好”有点含糊。在哪方面更好？如果您在许多地方使用appLogo.png，您可以将../app/media/appLogo.png 移动到一个全局常量，并在您希望显示应用程序徽标的任何地方使用此常量以获得更好的可维护性，但如果您在许多地方显示此图像恕我直言更好的方法将是一个AppLogo 组件。

angular 2 适合像 ERP 应用这样的大规模应用吗？

【参考方案2】：

使用常规src 设置属性，设置[src] 设置属性。考虑到对于图像（我假设您在谈论图像但您没有说），src 属性用于设置它们都可以工作的相应属性。

不过，使用[src] 有一个重要原因。在解析 html 时，浏览器往往会开始下载您放入 src 属性中的任何内容。所以假设你这样做：

<img src="myImgSrc"/>

浏览器通常会立即开始下载myImgSrc，这将导致控制台出现404。因此使用以下方法会稍微好一些：

<img [src]="myImgSrc"/>

【讨论】：

"src 设置属性，其中设置 [src]" 不完全正确。 src="myImgSrc" 设置属性与[src]="myImgSrc" 相同。 src="/assets/someimg.png" 设置属性而不是属性，因为根本不涉及绑定。 [attr.src]="myImgSrc" 或 attr.src="myImgSrc" 绑定到属性而不是属性。

【参考方案3】：

如果你有静态锚链接，那么继续

<img class="logo" src="../app/media/appLogo.png">

当从组件绑定时，下面的任何一个都可以工作。

<img class="logo" [src]="image_src">
<img class="logo" src=" image_src ">

在component.ts中

image_src: string = '../app/media/appLogo.png';