如何在app.component.html中拥有多个<router-outlet></router-outlet>

Question

重点是我想在app.component.html中实现几个。根据是移动视图还是桌面视图，组件的顺序会发生变化。我尝试了outlet =“name”，但有重复的代码，我确信可以做得更好。如何在模板中多次使用路由器插座？我正在使用 Angular 17。这是代码：

app.routes.ts

export const routes: Routes = [
{ path: '', component: SummaryViewComponent, outlet: 'router-desktop' },
{ path: 'summary', component: SummaryViewComponent, outlet: 'router-desktop' },
{ path: 'task', component: TaskViewComponent, outlet: 'router-desktop' },
{ path: 'board', component: BoardViewComponent, outlet: 'router-desktop' },
{ path: 'contacts', component: ContactViewComponent, outlet: 'router-desktop' },
{ path: 'privacy-policy', component: ContactViewComponent, outlet: 'router-desktop' 
},
{ path: 'legal-notice', component: ContactViewComponent, outlet: 'router-desktop' },

{ path: '', component: SummaryViewComponent, outlet: 'router-mobile' },
{ path: 'summary', component: SummaryViewComponent, outlet: 'router-mobile' },
{ path: 'task', component: TaskViewComponent, outlet: 'router-mobile' },
{ path: 'board', component: BoardViewComponent, outlet: 'router-mobile' },
{ path: 'contacts', component: ContactViewComponent, outlet: 'router-mobile' },
{ path: 'privacy-policy', component: ContactViewComponent, outlet: 'router-mobile' },
{ path: 'legal-notice', component: ContactViewComponent, outlet: 'router-mobile' },
];

app.component.html

<div class="grid-container-desktop">
    <app-navigation-desktop></app-navigation-desktop>
    <app-header></app-header>
    <div>
        <router-outlet name='router-desktop'></router-outlet>
    </div>
</div>

<div class="grid-container-mobile">
    <app-header></app-header>
    <div>
        <router-outlet name='router-mobile'></router-outlet>
    </div>
    <app-navigation-mobile></app-navigation-mobile>
</div>

app.component.scss

:host {
    height: 100%;
    display: block;
}

.grid-container-desktop {
    display: none;
}

.grid-container-mobile {
    display: none;
}

.grid-container-desktop {
    height: 100%;
    display: grid;
    grid-template-columns: 200px calc(100% - 200px);
    grid-template-rows: var(--header-height) auto;
    grid-template-areas: "navigation-desktop header" "navigation-desktop router-outlet";
}

.grid-container-mobile {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: "header" "router-outlet" "navigation-mobile";
}

@media screen and (min-width: 768px) {
    .grid-container-desktop {
        display: grid;
        grid-template-columns: 200px calc(100% - 200px);
        grid-template-rows: var(--header-height) auto;
        grid-template-areas: "navigation-desktop header" "navigation-desktop router-outlet";
    }
    .grid-container-mobile {
        display: none;
    }
}

@media screen and (max-width: 767px) {
    .grid-container-mobile {
        display: grid;
        grid-template-rows: var(--header-height) auto auto;
        grid-template-areas: "header" "router-outlet" "navigation-mobile";
    }
    .grid-container-desktop {
        display: none;
    }
}

app-navigation-desktop {
    grid-area: navigation-desktop;
}

app-navigation-mobile {
    grid-area: navigation-mobile;
}

app-header {
    grid-area: header;
}

router-outlet {
    grid-area: router-outlet;
}

.grid-container-desktop>*,
.grid-container-mobile>* {
    border: 5px solid red;
}

Answer 1

根据这篇post，我想你可以尝试一下

ngTemplateOutlet

与

ng-template

。

示例代码：

app.component.html

<div *ngIf="isDesktop">
  <span>loading true</span>
  <ng-container *ngTemplateOutlet="template"></ng-container>
</div>

<div *ngIf="!isDesktop">
  <span>loading false</span>
  <ng-container *ngTemplateOutlet="template"></ng-container>
</div>


<ng-template #template>
  <router-outlet></router-outlet>
</ng-template>