我有一个组件（例如 DataComponent 用于在表格中显示一些列表）。现在我想手动测试组件的视图（在浏览器中启动应用程序并单击，查看行为等）。 为此目的，我不想显示真实数据（从一些后端加载），但我想显示一些testdata。
我创建了另一个组件 MockDataComponent extends DataComponent ，它加载了我的testdata。另外，我创建了另一个环境 test.environment.ts ，并在环境中添加了一个标记 test ，以指示我是否要加载实际数据或testdata。 / p>
到目前为止一切顺利。但是，如何告诉Angular，要加载哪个Component？
由于 DataComponent 被路由，我想到的第一件事就是按如下方式定义我的路线：
{path: 'data', component: environment.test ? MockDataComponent : DataComponent}
但据我所知，这意味着两个组件都已编译，无论我在哪个环境中启动我的应用程序。此外，这将我的测试代码与实际应用程序的代码混合在一起，我想避免使用。
我的问题是：有没有办法告诉Angular将 DataComponent 的所有实例替换为 MockDataComponent 的实例（基于环境），同时保持测试 - 代码与“真实”代码分开？
我正在寻找@NgModule注释中的providers数组，仅用于组件。类似的东西：
{provide: DataComponent, useClass: MockDataComponent}