Как перезаписать существующий компонент на угловой?

Question

Я пытаюсь перезаписать существующий компонент на угловой.

Мой оригинальный компонент:

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

в app.component.html Я использую оригинальный компонент следующим образом:

<app-orginal></app-orginal>

Что бы вы хотели сделатьперезаписывает исходный компонент с помощью фиктивного компонента.

Это мой фиктивный компонент:

@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 Я пытался использовать это решение в своем приложении.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: https://github.com/annalen/overwrite-component

Спасибо за помощь.

Answer 1

Чтобы заменить компонент альтернативой, он должен заменить декларацию оригинала.Вы, например, объявляете оба компонента одновременно, но с разными селекторами.Ключ должен использовать тот же самый селектор, но только объявить один.

@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 не позволит вам объявить два компонента, которые используют один и тот же селектор, но вы должны использовать этот селектор, если вы этого не сделаетехочу изменить ваши шаблоны.

Я не уверен, почему вы хотите это сделать.Может быть, это не то, что вам нужно.