Зачем нам нужно связываться с SRC, чтобы получить изображение из файла TypeScript? - PullRequest
Новая
       78

Зачем нам нужно связываться с SRC, чтобы получить изображение из файла TypeScript?

0 голосов
/ 16 мая 2019

Я получил массив, в котором помимо имени и некоторых других свойств у меня также есть ImagePath.Решение, которое я нашел, состояло в том, что в img src мы используем квадратные скобки [] вокруг src.Я знаю, что это означает привязку свойства, но почему мы используем его в 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>

1 Ответ

0 голосов
/ 16 мая 2019

Сначала для случая [src] - Так как путь к вашему изображению не является статичным, вы привязываете динамический путь к изображению в html с помощью [src]. Свойство src HTMLElement img привязано к recipe.imagePath , и если вы измените путь в ts, оно изменится соответственно в html. Квадратные скобки используются для привязки данных к свойству элемента.

Другим важным примером использования, который следует учитывать, является привязка @Input. Передача значения из одного компонента в другой. Вы можете передать какое-то значение из родительского в дочерний компонент, например: 

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

См. Этот пример: https://stackblitz.com/edit/angular-input-example и можете проверить это сообщение в блоге тоже - https://blog.bitsrc.io/one-way-property-binding-mechanism-in-angular-f1b25cf00de7

...