Symptom
During preview, a blank screen is displayed, and the error message "Preview failed. View details in the PreviewerLog window." is displayed in the upper part.
The warning message "@Consume/@Link decorated property <propertyName> not initialized." is displayed in the PreviewerLog window.
Solution
Since members decorated with @Consume/@Link need to be bound to the parent component and cannot complete initialization when previewed in isolation, previewing pages or components that contain members decorated with @Consume (or @Link) may result in a blank screen.
Avoid directly previewing such components. Instead, preview how they look through their parent components.
The sample code is as follows:
// Suggest adding @ Preview on ParentComp to preview the preview effect of ChildComp
@Preview
@Component
struct ParentComp {
// @Provide decoration is provided by the entrance component ParentComp as its descendant component
@Provide reviewVotes: number = 10;
build() {
Column() {
Button(`reviewVotes(${this.reviewVotes}), give +1`)
.onClick(() => this.reviewVotes += 1)
ChildComp()
}
}
}
// @Preview is not recommended to directly preview ChildComp
@Component
struct ChildComp {
// The variable decorated with '@Consume' is bound to the variable decorated with '@Provide' in its ancestor component ParentComp using the same attribute name
@Consume reviewVotes: number;
build() {
Column() {
Text(`reviewVotes(${this.reviewVotes})`)
Button(`reviewVotes(${this.reviewVotes}), give +1`)
.onClick(() => this.reviewVotes += 1)
}
.width('50%')
}
}