Angular 2 (7.3.6): добавление / загрузка компонента в именованный маршрутизатор-выход с кодом без изменения URL браузера

Question

• У меня есть браузерное приложение Angular 2 V 7.3.6.
• Приложение представляет собой SPA, но со многими компонентами и подкомпонентами.
• В файле index.html у меня есть основной компонент, который называется хостом выходы роутера и это выглядит так:

HTML-код для основного компонента

<div class="div-A">
    <router-outlet name="Outlet-A"></router-outlet>
</div>

<div class="div-B">
    <router-outlet name="Outlet-B"></router-outlet>
</div>

<div class="div-C">
    <router-outlet name="Outlet-C"></router-outlet>
</div>

• Внутри основных компонентов класса TypeScript я хочу создать новый экземпляры других компонентов и показать их в Outlet-A, Outlet-B или Выход-С.
• В качестве примера я создаю LoginComponent в конструкторе и хочу показать его в Outlet-B

Код TS для основного компонента:

import { Component }      from '@angular/core';
import { Router }         from '@angular/router';
import { LoginComponent } from './LoginComponent';


@Component
(
    {
        selector: 'main',
        templateUrl: './main.html',
        styleUrls:['./main.css']
    }
)
export class MainComponent
{
    constructor (private router :Router)
    {
        login:LoginComponent = new LoginComponent();

        this.CreateAndShowAnyComponent("Outlet-B", login);
    }

    CreateAndShowAnyComponent(outletName:string, component:any): void
    {
        //WHAT TO DO HERE?

        //IS THIS EVEN POSSIBLE?

        //PSEUDO CODE:

        this.router.outlets[outletName].clear();
        this.router.outlets[outletName].add(component);
    }
}

Что я хочу достичь, это следующее:

1. Нет жестко заданных, набранных маршрутов. Не внутри HTML, не внутри компонента / модулей.

2. Все создание экземпляров и маршрутизация должны управляться кодом.

3. URL-адрес браузера всегда должен оставаться неизменным и никогда не изменяться (localhost: 4200 против localhost: 4200 / changeRoute)

Чем отличаются другие вопросы / ответы по SO?

Я прочитал много других примеров в SO и интернете, и все они по-прежнему содержат «жестко закодированные» определения маршрутов, например: (фрагмент кода из другого потока)

const routes: Routes = [
  {path: '', redirectTo: 'home', pathMatch: 'full'},
  {path: 'home', component: HomeComponent},

];

Я не хочу жестко закодированных маршрутов, как указано выше ...

Мой вопрос:

Возможно ли это и как должен выглядеть код?

(см. => PSEUDO-код выше в примере main.ts)