组件中的 Angular2 : Uncaught (in promise): Quotes are not supported for evaluation!

Question

我有一个具有输入参数的组件:

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

@Component({
    selector: 'comment' ,
    template: `    
        <div class="col-lg-6 col-md-6 col-xs-6 thumb">
            <div class="post-owner">
                <div class="media">
                    <div class="media-left">
                        <a href="#">
                          <img class="media-object rounder" src=imageURI >
                        </a>
                    </div>
                </div>
            </div>
        </div>`
})

export class CommentCompoent{
    @Input() imageURI="";
}

在父组件中，我已经像这样向它传递了一个图像路径:

<comment [imageURI]='image_path'></comment>

问题是，当我运行它时，它会提示:

EXCEPTION: Error: Uncaught (in promise): Quotes are not supported for evaluation!

那我该怎么办呢？

更新:当我删除父组件中的 [imageURI]='image_path' 时它工作正常，它完美地显示了组件的其余部分

Answer 1

您应该将父组件中的 comment 标记更改为:

<comment [imageURI]="image_path"></comment>

分配模板绑定(bind)时不要使用单引号。仅使用它们来格式化字符串，如下所示:

<comment [imageURI]="'path/to/image.jpg'"></comment>