Question

在我的angular2应用程序中，我试图将一组参数传递给子组件。

这是我的孩子组成部分：

@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 class="media-body">
                                        <h3 class="media-heading"><strong>{{username}}</strong></h3>
                                                {{comment}}
                                    </div>
                            </div>
                        </div>
                    </div>`
})

export class CommentCompoent{
    @Input() imageURI;
    @Input() comment;
    @Input() username;
    constructor(){
        console.log("imageURI: "+ this.imageURI);
    }

}

这是我的父组件：

<comment [username]=username   [comment]=comment [imageURI]=profile_pic></comment>

export class SinglePictureComponent{
    username='Salman Lashkarara';
    comment="I love you";
    profile_pic='https://scontent-arn2-1.cdninstagram.com/t51.2885-19/s150x150/13743117_1060048037418472_411027981_a.jpg';

}

结果，前两个参数被正确传递。 问题是imageURI没有值，我将它打印在child的构造函数中。似乎imageURI是undefined。那么我该如何处理呢？

Answer 1

执行@Inputs()时尚未分配

constructor()

这应该做你想要的：

ngOnInit(){
    console.log("imageURI: "+ this.imageURI);
}

Angular2：子组件未接收uri作为参数

1 个答案: