在新的 Angular 中 ngSrc 等价于什么？

小开

最佳答案

AngularJS:

<img ng-src="\{\{movie.imageurl}}">

Angular 2+:

<img [src]="movie.imageurl">

Angular docs

Note that interpolation can achieve the same result:

<img src="\{\{vehicle.imageUrl}}">


<img [src]="vehicle.imageUrl">

There is no technical difference between these two statements for property binding, as long as you don't desire two-way binding.

Interpolation is a convenient alternative for property binding in many cases. In fact, Angular translates those interpolations into the corresponding property bindings before rendering the view. source

小开

It can also be written in interpolation form like:

<img src="\{\{movie.imageurl}}">

小开

<tr *ngFor="let post of posts | paginate: { id: 'server', itemsPerPage:
10, currentPage: p , totalItems: count  }">


<td>
<img src="\{\{post.youtubeVideoId}}">
</td>


<td>
\{\{post.videoName}}
</td>


</tr>

小开

It is a two-step process to achieve the same functionality of ng-src in your Angular application.

First Step:

In your HTML, use the new syntax:

<img [src]="imageSrc">

Second Step:

In your component/directive, initialize the value to be empty. For example:

@Component({
selector: 'ag-video',
templateUrl: './video.component.html'
})
export class SampleComponent {
imageSrc = '';
}

Now, this would eliminate the null network call (empty call) due to the value not being set on to the element.