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中的父项传递给它。

在另一个组件中使用：

<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解析错误\。

如何将网址字符串传递给<icon>而不会收到错误？

Answer 1

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

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

或者如果使用括号，则需要使用引号，因此angular将其评估为字符串

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

Answer 2

我不知道为什么你需要将它作为字符串传递，当你可以将它作为 binding 跟随时，

<img [src]="imgSrc"     //<<<----- removed curly braces and added [] around src attribute
     class="pull-xs-left icon card-icon" />

child component 中的

使用它像是

<whateverChild [imgSrc]="imgSrc"></whateverChild>

这里我正在[]包装imgSrc（或者使用其他名称，如果angular2不允许你使用相同的名称而不确定），这允许我使用/传递绑定值。如果我知道字符串值，我也可以像

一样使用它

<whateverChild imgSrc="'static path/string'"></whateverChild>

此语法只会传递 static string ，因为它由单引号包装而另一方我不强制使用[]的绑定值的angular2传递值。< / p>

简而言之：[] - for angualr2 bindings和no [] - for static value

如果您计划像这样传递imgSrc，那么在阅读上述帖子后进行一些澄清，

 <whateverChild [imgSrc]="'imgSrc'"></whateverChild>

然后它将imgSrc作为字符串传递，而不是它包含的值。

我希望你能得到我想说的话。

将图像源URL作为字符串传递给组件

2 个答案: