Блог

• У меня есть браузерное приложение 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>
  

• Внутри класса main components TypeScript я хочу создать новый
  экземпляры других компонентов и отобразить их в Outlet-A, Outlet-B или
  Выход-C.
• Просто в качестве примера я создаю 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 vs localhost: 4200 / changedRoute)

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

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

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

];
  

Мне не нужны жестко закодированные маршруты, подобные приведенным выше…

Мой вопрос:

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

(смотрите => ПСЕВДОКОД выше в примере main.ts)