Angular页面首次加载触发TypeError，贴纸预览组件报错如何修复？

问题原因 #

页面首次加载时，父组件还未给previewStickerData赋值（用户未点击元素），此时传入StickerPreviewComponent的StickerData为空对象/未定义。你的set StickerData方法直接访问this._stickerData.StickerData，当_stickerData为空或不存在StickerData属性时，就会抛出空指针错误，后续点击元素赋值后功能正常，所以代码不会崩溃但会持续弹窗报错。

另外注意你组件ngOnInit中调用接口重新赋值_stickerData的逻辑，会覆盖父组件传入的选中元素数据，属于冗余冲突逻辑，建议删除。

修复方案（任选其一即可，推荐前两种组合使用） #

方案1：setter内增加空值判断 #

修改StickerPreviewComponent的set StickerData逻辑，使用可选链做空值保护：

@Input()
set StickerData(prm: IStickerData) {
  if (this._stickerData != prm) {
    this._stickerData = prm;
  }
  // 仅当_stickerData存在StickerData属性时才拼接url，否则赋值为空字符串
  this.url = this._stickerData?.StickerData ? "http://api.labelary.com/v1/printers/8dpmm/labels/4x6/0/" + this._stickerData.StickerData : '';
}

方案2：父组件延迟渲染子组件 #

修改父组件模板，仅当previewStickerData有值时才加载sticker-preview组件：

<fuse-sidebar class="sidebar centra details-sidebar fuse-white" name="sticker-preview-sidebar" position="right">
    <sticker-preview *ngIf="previewStickerData" [StickerData]="previewStickerData"></sticker-preview>
</fuse-sidebar>

方案3：给_stickerData补充初始值 #

修改_stickerData的初始声明，默认补全StickerData属性：

public _stickerData: IStickerData = {
    StickerData: ''
};

内容的提问来源于stack exchange，提问作者Grim Stone