如何在angular中覆盖现有组件？

我正在尝试覆盖angular中的现有组件

我的原始组件是：

@Component({
  selector: 'app-orginal',
  templateUrl: './orginal.component.html',
  styleUrls: ['./orginal.component.css']
})
export class OrginalComponent implements OnInit {
}

在app.component.html中，我使用如下原始组件：

<app-orginal></app-orginal>

与此答案相关，我尝试在app.module.ts中使用此解决方案：

@NgModule({
    declarations: [
        AppComponent,
        OrginalComponent,
        MockOfOrginalComponent
    ],
    imports: [
        BrowserModule,
        HttpClientModule,
        RouterModule.forRoot([
            {path: 'app-mock-of-orginal', component: MockOfOrginalComponent},
            {path: 'app-orginal', redirectTo: 'app-mock-of-orginal', pathMatch: 'full'},
        ]),
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {
}

但它不起作用。我做错了什么

以下是我的git hub项目：

---

感谢您的帮助。

要用替代品替换组件，必须替换原始组件的声明。您的示例是同时声明两个组件，但使用不同的选择器。关键是使用相同的选择器，但只声明一个

@Component({selector: 'app-original'})
export class MockAppComponent {
      // this will replace AppComponent
}

@Component({selector: 'app-original'})
export class AppComponent {
}

// You could use a value from environment.ts
// if you need to toggle this at compile time.
const mockFlag = true;

@NgModule({
    declarations: [
       mockFlag ? MockAppComponent : AppComponent,
    ],
    imports: [
        BrowserModule,
        HttpClientModule,
        RouterModule.forRoot([]),
    ],
    providers: [],
    bootstrap: [mockFlag ? MockAppComponent : AppComponent]
})
export class AppModule {
}

Angular不允许您声明共享同一选择器的两个组件，但如果不想更改模板，则必须使用该选择器

---

我不知道你为什么要这么做。也许这不是你想要的。

你想解决什么问题？您可以使用诸如“override”和“mock”之类的词，但随后会显示与路由相关的代码。这是为了单元测试吗？我想在app.module.ts中插入几行代码，用原始组件的app mock覆盖原始组件的app。我正在寻找类似的东西，但是对于组件：{provide:OrginalComponent，useExisting:MockOfOrginalComponent}，我认为不能使用提供程序来改变这一点。提供程序用于依赖项注入。在运行时，Angular将向要注入的提供程序添加组件，但更改类关联并不会更改模板在运行时选择组件进行创建的方式。请记住，组件有一个“providers”属性，允许您覆盖组件和视图的可注入项。也许这会给你提供一些其他的选择。谢谢你，这正是我想要的。我有一个角度库，有两种按钮，一种是单选按钮，另一种是普通按钮。根据应用程序的不同，按钮布局应该不同。是否可以通过设置服务变量动态控制组件的选择？只是想知道

MockAppComponent

是否可以实现/扩展

AppComponent

，然后覆盖一些功能？

@Component({selector: 'app-original'})
export class MockAppComponent {
      // this will replace AppComponent
}

@Component({selector: 'app-original'})
export class AppComponent {
}

// You could use a value from environment.ts
// if you need to toggle this at compile time.
const mockFlag = true;

@NgModule({
    declarations: [
       mockFlag ? MockAppComponent : AppComponent,
    ],
    imports: [
        BrowserModule,
        HttpClientModule,
        RouterModule.forRoot([]),
    ],
    providers: [],
    bootstrap: [mockFlag ? MockAppComponent : AppComponent]
})
export class AppModule {
}