angular - 将图像源 url 作为字符串传递给组件

Question

我有这个组件:

icon.component.ts:

import { Component, Input } from "@angular/core";

@Component({
   selector: "icon",
   styleUrls: ["dist/app/components/shared/subcomponents/icon.component.css"],
   templateUrl: "dist/app/components/shared/subcomponents/icon.component.html",
})
export class IconComponent {
   @Input() public imgSrc: string;
}

icon.component.html:

<img src="{{ imgSrc }}" class="pull-xs-left icon card-icon" />

所以imgSrc需要在html中由parent传递给它。

在另一个组件中的用法:

<icon [imgSrc]="dist/resources/images/heart.png"></icon>

错误:

EXCEPTION: Uncaught (in promise): Error: Error in dist/app/components/results-page/result-image.component.html:3:12 caused by: Cannot read property 'png' of undefined
TypeError: Cannot read property 'png' of undefined
    at CompiledTemplate.proxyViewClass.View_ResultImageComponent0.detectChangesInternal (/FindPageModule/ResultImageComponent/component.ngfactory.js:93:113)
    at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9355:18)
    at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9448:48)
    at CompiledTemplate.proxyViewClass.View_ResultDetailsComponent0.detectChangesInternal (/FindPageModule/ResultDetailsComponent/component.ngfactory.js:318:20)
    at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9355:18)
    at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9448:48)
    at CompiledTemplate.proxyViewClass.View_ResultsComponent0.detectChangesInternal (/FindPageModule/ResultsComponent/component.ngfactory.js:127:20)
    at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9355:18)
    at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9448:48)
    at CompiledTemplate.proxyViewClass.View_FindPageComponent0.detectChangesInternal (/FindPageModule/FindPageComponent/component.ngfactory.js:91:19)

我试图逃避 .喜欢:

[imgSrc]="dist/resources/images/heart\.png"

但是这会导致 html 解析错误 \ .

如何将 url 字符串传递给 <icon>没有错误？

Answer 1

去掉 []。这将导致 Angular 尝试评估您传递给它的值。如果没有括号，该值将被视为字符串，这就是您想要的

imgSrc="dist/resources/images/heart.png"

或者如果你使用括号，那么你需要使用引号，所以angular将它评估为一个字符串

[imgSrc]="'dist/resources/images/heart.png'"