Использование нескольких под Angular Материал (8) не работает

Question

Попытка переопределить проблему, поскольку у меня есть дополнительная информация.

Я работаю с Angular Material (8) - вместе с пакетом MDBootstrap. У меня есть 2 области. Одна из них - это область, в которой выполняются входы / авторизации (AUTH) , а другая - область «панели мониторинга» (доступ к которой осуществляется после входа в систему) (DASHBOARD) .

Вот код, который работает с AUTH и MYDASHBOARD - AUTH интерпретируется Angular как primary. Я назвал второе router-outlet определение mydashboard

app.component. html

<router-outlet></router-outlet>
<router-outlet name="mydashboard"></router-outlet>

app-routing. module.ts

const routes: Routes = [
  { path: 'auth', loadChildren: './kdc/authorization/authorization.module#AuthorizationModule' },
  { path: 'dashboard', loadChildren: './kdc/dashboard/dashboard.module#DashboardModule'  },
  { path: '**' , component: PageNotFoundComponent }

];

authorization-routing.module.ts

export const routesAuth : Routes = [
    { path: 'login' , component: LoginComponent },
    { path: 'register' , component: RegisterComponent },
    { path: 'forgot-pass' , component: ForgotPasswordComponent },
];

ПРИМЕЧАНИЕ: ВСЕ ДЛЯ (AUTH) РАБОТАЕТ - С ЭТОЙ ЧАСТЬЮ НИЧЕГО НЕ НЕПРАВИЛЬНО ПРОБЛЕМА С (ИНФОРМАЦИОННАЯ ПЛАТА)

После входа обработка переходит на панель мониторинга. Я использовал приведенный ниже код для отправки его на панель инструментов

login.component.ts

onLoginSubmit() {
[... snip ...]
        if (this.in_results.count == 0)
          this.errorMsg = 'EMail/Login ID not found';
        else
          // go ahead and navigate to the HOME page
          this.router.navigate(['/dashboard']);  
[... snip ...]
}

dashboard-routing.module.ts

const dashboardroutes: Routes = [
    { path: 'clients', component: ClientsComponent, outlet: 'contentarea'  },
    { path: '', component: HomeComponent, outlet:'mydashboard' },
];

ПРИМЕЧАНИЕ: ВСЕ ВЫПОЛНЯЕТСЯ В ТОНКОМ ЗДЕСЬ, приборная панель запускается, и она сохраняется в <router-outlet name="mydashboard"></router-outlet> Проблема возникает с использованием меню.

Когда нажав на область «Клиенты», я ожидаю, что «Информация о клиенте» будет помещена в <router-outlet name="contentarea"> </router-outlet> из-за того, как было определено home.component.html.

home. компонент. html

[... snip ...]
                       <!-- Collapsible link -->
                            <mdb-accordion-item-body>
                                <ul>
                                    <li>  <a [routerLink]="[{ outlets: { primary: 'mydashboard', contentarea : 'clients' }}]" mdbWavesEffect> Press for clients</a></li> 
                                    <li><a href="#" mdbWavesEffect>Link 2</a></li>
                                </ul>
                            </mdb-accordion-item-body>
                        </mdb-accordion-item>

[... snip ...]
<!--Main Layout-->
<main>
    <div class="container-fluid mt-5">
        <router-outlet name="contentarea"> </router-outlet>
    </div>
</main>
<!--/Main layout-->



[... snip ...]

ПРИМЕЧАНИЕ: Обработка не go до: <router-outlet name="contentarea"> </router-outlet>

INSTEAD

Идет по адресу: <router-outlet></router-outlet>, расположенный на странице: app.component.html

ВОПРОС: Почему это происходит? Я делаю это правильно? Есть ли лучший способ?

Я посмотрел следующие документы

, но пока не нашел ничего.

Любая информация или идеи будут очень оценены.

TIA

Answer 1

Вы добавили <router-outlet></router-outlet> в родительский компонент html?

Answer 2

После исследования (я новичок в Angular в значительной степени), я обнаружил, что мне нужно следующее, чтобы решить мою проблему:

Поскольку я работаю с "Lazy Loading", я убедился, что Маршруты, определенные в файлах xxx-routing.ts, были должным образом импортированы в файлы xxx-module.ts (я пропустил это для настройки Dashboard)

Я изменил настройку Dashboard так, чтобы использовались дети:

app-routing.module.ts

const routes: Routes = [
  { path: 'auth', loadChildren: './kdc/authorization/authorization.module#AuthorizationModule' },

  { path: 'dashboard', loadChildren: './kdc/dashboard/dashboard.module#DashboardModule'  },
  { path: '**' , component: PageNotFoundComponent }
];

dashboard.routing.module.ts

export const dashboardroutes: Routes = [

    { path: 'landing/:id', component: HomeComponent,
        children: [
            { path: 'clients', component: ClientsComponent, outlet: 'contentarea'  },
        ]},
];

Я играл по-разному чтобы увидеть, работают ли маршрутизаторы. Именно во время «playaround» я нашел ответ, который работал для меня.

<!-- WORKS : http://localhost:4200/dashboard/landing/(contentarea:clients) -->

<!-- NOTES: GOES TO BASE HOME PAGE FOR DASHBOARD: http://localhost:4200/dashboard/landing -->

<!-- 404 RESULT: http://localhost:4200/dashboard/landing/landing 
    <li>  <a [routerLink]="['landing',  { outlets: { contentarea : ['clients']}}] " mdbWavesEffect> Press for clients</a></li> -->

<!-- the one below WORKED:  http://localhost:4200/dashboard/landing/(contentarea:clients) -->
        <li>  <a [routerLink]="[{ outlets: { contentarea : ['clients']}}] " mdbWavesEffect> Press for clients</a></li>

Я избавился от <router-outlet name="mydashboard"><router-outlet>, так как он, казалось, не был необходим. Я думал, что маршрутизаторы могут работать в «братских» отношениях. Выяснили, что отношения между различными определениями router-outlet являются скорее отношениями "родитель-ребенок".