如何以角度覆盖现有组件? [英] How do I overwrite an existing component in angular?

问题描述

我正在尝试用 Angular 覆盖现有组件.

I am trying to overwrite an existing component in angular.

我原来的组件是:

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

在 app.component.html 中，我使用的是这样的原始组件:

in the app.component.html I use the original component like that:

<app-orginal></app-orginal>

您想要做的是用模拟组件覆盖原始组件.

What you would like to do is overwrite the original component with the mock component.

这是我的模拟组件:

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

与此答案相关https://stackoverflow.com/a/49327712/7717382 我尝试使用此解决方案在我的 app.module.ts 中:

Related to this answer https://stackoverflow.com/a/49327712/7717382 I tried to use this solution in my 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 {
}

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

But it does not work. What did I do wrong?

这是我的 git-hub 项目:https://github.com/annalen/overwrite-component

Here is my git-hub project: https://github.com/annalen/overwrite-component

感谢您的帮助.

推荐答案

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

To replace a component with an alternative it has to replace the declaration of the original. You're example is declaring both components at the same time, but with different selectors. The key is to use the same selector, but only declare one.

@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 不允许您声明共享相同选择器的两个组件，但如果您不想更改模板，则必须使用该选择器.

Angular will not allow you to declare two components that share the same selector, but you have to use that selector if you don't want to change your templates.

我不确定你为什么要这样做.也许这不是你需要的.

I'm not sure why you want to do this. Maybe this isn't want you need.

这篇关于如何以角度覆盖现有组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！