Question

我刚刚开始使用Angular的@Input功能，到目前为止，一切都很顺利。我使用Firebase作为我的数据库，我打电话的数据块看起来像这样

{
    "page_area_business_image"      : {
        "expand"    : {
            "intro" : "some info...",

            "title" : "a title"
        },
        "rebrand"   : {....},
        "newbrand"  : {....},
        "questions" : {
            "question01"    : {
                "id"        : "an ID",
                "name"      : "a name",
                "question"  : "a question",
                "answers"   : {
                    "answer01"  : {
                        "answer"    : "some answer",
                        "id"        : "an ID"
                    },
                    "answer02"  : {
                        "answer"    : "another answer",
                        "id"        : "an ID"
                    }
                }
            },
            "question02"    : {....},
            "question03"    : {....}
        }
    }
}

我现在唯一的问题是让子组件读取questions数据console.log()在父组件中完全正常，这意味着服务文件正在传递它。以下是我如何调用它。

父组件

private busExpInformation:  FirebaseObjectObservable<any>;

private busImageO:          FirebaseObjectObservable<any>;
private busImageQuesO:      FirebaseObjectObservable<any>;



constructor(private _homeService: HomeService) { }



ngOnInit() {
    this._homeService.getBusExpInformation().subscribe(BusExpInformation =>{
        this.busExpInformation = BusExpInformation;
    });

    this._homeService.getBusImage().subscribe(BusImage => {
        this.busImageO = BusImage.expand;
        this.busImageQuesO = BusImage.questions;
        console.log(this.busImageQuesO); //works fine here
    });

}

父模板

<business-image [busImageI]="busImageO" [busImageQuesI]="busImageQuesO"></business-image>

子组件

@Input('busImageI')
busImage: FirebaseObjectObservable<any>;

@Input('busImageQuesI')
questions: FirebaseObjectObservable<any>;

ngOnInit() {
    console.log(this.questions);// doesn't return anything
}

我甚至回到了父组件，并在它自己的数据库调用中调用它

this._homeService.getBusImage().subscribe(BusImage => {
        this.busImageQuesO = BusImage.questions;
        console.log(this.busImageQuesO);
    });

它仍然没有对子组件产生影响。另一个通过我一直在努力的其他元素显示出良好以及所有其他元素。

我在一些文章和教程中看到过，他们强调在父组件中导入和声明子组件，但我已经看到其他人在他们工作的地方它是在主模块中声明父组件链接到的，这就是我设置它的方式。我不知道这是否有所作为。我已经看到了导入多个@Input的其他示例，我也看不到我做的不同。

Answer 1

尝试使用子组件中的ngOnInit() 更改ngOnChanges()，并且不要通过导入OnChanges并实施它来忘记相关的其他更改。有关详细信息，请查看this和this。

@Input未从父组件

1 个答案: