为什么我们需要绑定到 SRC 才能从 TypeScript 文件中获取图像？

Question

我得到了一个数组，用于存储名称和其他一些字符串属性。

我也有 "ImagePath"。我找到的解决方案是，在图像源中，我们在源周围使用方括号 [ ]。

我知道这意味着属性绑定，但为什么我们在 src 周围使用它。除了这个用例之外，理解属性的最佳方法是什么。

Export class RecipeListComponent implements OnInit {
  recipes: Recipe[] = [
    new Recipe('A Test Recipe', 'This is simply a test', 'https://upload.wikimedia.org/wikipedia/commons/1/15/Recipe_logo.jpeg'),
    new Recipe('A Test Recipe', 'This is simply a test', 'https://upload.wikimedia.org/wikipedia/commons/1/15/Recipe_logo.jpeg')
  ];

 <span class="float-right">
   <img [src] ="recipe.imagePath" 
     alt="{{ recipe.name }}" 
     class="img-fluid" style="max-height: 50px;">
 </span>

Answer 1

首先，对于[src] case- 由于您的图像路径不是静态的，因此您通过 [src] 将动态图像路径绑定到 html。 HTMLElement img 的 src 属性绑定到 recipe.imagePath 如果您在 ts 中更改路径，它会在 html 中相应更改. 方括号用于将数据绑定到元素的属性。

另一个需要考虑的重要用例是@Input 绑定。将值从一个组件传递到另一个组件。您可以像这样将一些值从父组件传递到子组件 -

  <app-child
    [simpleText]="someText"
    [magicText]="'Testing magic text'"
    [pubProp]="pubPropText">
  </app-child>

查看此示例：https://stackblitz.com/edit/angular-input-example 和也可以查看此博客 post- https://blog.bitsrc.io/one-way-property-binding-mechanism-in-angular-f1b25cf00de7

为什么我们需要绑定到 SRC 才能从 TypeScript 文件中获取图像？

Why do we need to bind to SRC to get an image from the TypeScript file?

angular

binding

property-binding