Angular 当类型1或类型2类中的属性p不存在时，Typescript抛出错误

我有一个组件类，其中我有一个class属性

renderContent

，它可以是给定的2个

类型
s类/模型
LessonPageType和
任务页面类型中的一个，基于我作为
@Input（）
传递的值。下面是我的类组件代码：

import {ChangeDetectionStrategy, Component, HostListener, Input, OnInit} from '@angular/core';
import {LessonPageType, TaskPageType} from '../../models/types';

@Component({
  selector: 'app-page-renderer',
  templateUrl: './page-renderer.component.html'
})
export class PageRendererComponent implements OnInit {

  @Input() renderContent: LessonPageType | TaskPageType;
  @Input() submission: TaskSubmissionType;
}

问题：-

我正在以
renderContent？的身份访问模板中的
renderContent
变量对象。接受回答。此
accept\u answer
键在TaskPageType类中可用，但在另一个类中不可用，这导致应用程序在AOT下构建时出现以下错误。除了将
renderContent
的类型设置为
any
之外，还有其他解决方案可以让它正常工作吗

错误：-

src/app/shared/components/page renderer/page renderer.component.html（16,17）中出错：类型“LessonPageType | TaskPageType”上不存在属性“accepts_answer”。
类型“LessonPageType”上不存在属性“accepts_answer”

如果将变量声明为两个或多个接口/类的或，则只能访问它们之间共享的属性。我将使用的可能解决方案：


在
LessonPageType
将
LessonPageType
extend
TaskPageType
设置为所有属性，以及您添加的自定义属性
最后一个选项，将
renderContent
声明为
any

希望有帮助，
如果你有
LessonPageType
，这取决于你想在模板中显示什么

如果是空字符串，可以这样做：

类PageRenderComponent实现OnInit{
@Input（）renderContent:LessonPageType | TaskPageType；
@Input（）提交：TaskSubmissionType；
get acceptnswer（）：字符串{
在this.renderContent？this.renderContent.accept\u-answer“”中返回“accept\u-answer”；
}
}

并在模板中使用
acceptnswer
而不是
renderContent？.accept\u answer
如果
renderContent
是LessonPageType，您想做什么？@htn我有一个用于呈现内容的组件。此组件接受LessonPageType或TaskPageType的输入。除了1或2键外，这两个模型都有一些相似的属性。您使用的是Angular的哪个版本？@DanielB我使用的是Angular 8.1.2第一个解决方案会使模型不纯。第二种解决方案可能违反了创建模型/接口的概念。所有选项都是错误的。我认为一个接口扩展另一个接口没有任何问题，只要它们之间存在有意义的关系（如
汽车
扩展
汽车
）。由于我不知道您的具体业务逻辑，也许这不适合您。。。