Angular中结合路由复用accounts.layout.ts的兼容问题问询

目标 #

我需要为 /v3/signin/identifier 和 /v3/signin/challenge/pwd 两个路由路径复用 accounts.layout.ts 组件。

核心问题 #

使用 <ng-content select="[right-content-action]"> 进行内容投影时，无法和 <router-outlet> 正常配合，导致页面布局混乱、指定内容未正确渲染。

已尝试操作 #

1. 先创建了 accounts.layout.ts 组件，直接在 sign-in-identifier.page.html 中嵌套使用时，功能完全正常。
2. 尝试将布局组件与 <router-outlet> 结合，在 app.component.html 中包裹路由出口，结果出现渲染异常。

相关代码片段 #

accounts.layout.ts 模板代码 #

<div class="overlay" [class.overlay-show]="showOverlay"></div>

<div class="main">
  <img class="logo" src="/assets/google-logo.svg" alt="google logo" />
  <div class="section">
    <div class="left-content">
      <span class="com-headline-5">{{ title }}</span>
      <span class="com-headline-6">{{ description }}</span>
    </div>
    <div class="right-content">
      <ng-content select="[right-content-input]" />

      <div class="actions">
        <ng-content select="[right-content-action]" />
      </div>
    </div>
  </div>
</div>

sign-in-identifier.page.html（直接使用布局时正常） #

<acc-accounts
  title="Sign In"
  description="Use your Google Account"
  [showOverlay]="isLoading"
>
  <com-input-text
    #inputEmail
    placeholder="Email"
    [(value)]="email"
    [errorMessage]="errorMessage"
    right-content-input
  />

  @if (isCreateAccountEnabled) {
    <com-button-basic (buttonClick)="onCreateAccount()" right-content-action
      >Create account</com-button-basic
    >
  }

  <com-button-flat
    (buttonClick)="onNext()"
    [disabled]="isLoading"
    right-content-action
    >Next</com-button-flat
  >
</acc-accounts>

app.component.html（结合路由使用时异常） #

<acc-accounts>
  <router-outlet />
</acc-accounts>

预期与实际结果 #

• 预期结果：页面布局符合设计规范，输入内容和操作按钮正确显示在对应区域
  
• 实际结果：页面布局混乱，ng-content 指定的内容未被渲染到目标位置
  

解决方案 #

问题根源：ng-content 只能捕获直接传递给组件的内容投影，而 <router-outlet> 渲染的路由组件属于子层级，它们的内容无法被上层布局组件的 ng-content 捕获。

方案1：使用模板引用（ng-template + ngTemplateOutlet）替代内容投影 #

1. 修改布局组件，添加输入属性接收模板引用：

// accounts.layout.ts
import { Component, Input, TemplateRef } from '@angular/core';

@Component({
  selector: 'acc-accounts',
  templateUrl: './accounts.layout.html',
})
export class AccountsLayoutComponent {
  @Input() title!: string;
  @Input() description!: string;
  @Input() showOverlay = false;
  @Input() contentTemplate?: TemplateRef<any>;
  @Input() actionsTemplate?: TemplateRef<any>;
}

2. 更新布局模板，用模板渲染替代 ng-content：

<!-- accounts.layout.html -->
<div class="overlay" [class.overlay-show]="showOverlay"></div>

<div class="main">
  <img class="logo" src="/assets/google-logo.svg" alt="google logo" />
  <div class="section">
    <div class="left-content">
      <span class="com-headline-5">{{ title }}</span>
      <span class="com-headline-6">{{ description }}</span>
    </div>
    <div class="right-content">
      <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>

      <div class="actions">
        <ng-container *ngTemplateOutlet="actionsTemplate"></ng-container>
      </div>
    </div>
  </div>
</div>

3. 在路由组件中定义模板，并传递给布局组件：

<!-- sign-in-identifier.page.html -->
<acc-accounts
  title="Sign In"
  description="Use your Google Account"
  [showOverlay]="isLoading"
  [contentTemplate]="contentTemplate"
  [actionsTemplate]="actionsTemplate"
>
</acc-accounts>

<ng-template #contentTemplate>
  <com-input-text
    #inputEmail
    placeholder="Email"
    [(value)]="email"
    [errorMessage]="errorMessage"
  />
</ng-template>

<ng-template #actionsTemplate>
  @if (isCreateAccountEnabled) {
    <com-button-basic (buttonClick)="onCreateAccount()">Create account</com-button-basic>
  }
  <com-button-flat
    (buttonClick)="onNext()"
    [disabled]="isLoading"
    >Next</com-button-flat
  >
</ng-template>

方案2：使用嵌套路由让布局作为父容器 #

1. 修改路由配置，将布局组件作为父路由，登录相关路由作为子路由：

// app-routing.module.ts
const routes: Routes = [
  {
    path: 'v3/signin',
    component: AccountsLayoutComponent,
    children: [
      { path: 'identifier', component: SignInIdentifierPageComponent },
      { path: 'challenge/pwd', component: SignInPwdChallengePageComponent }
    ]
  }
];

2. 更新布局模板，将 <router-outlet> 放在内容渲染位置：

<!-- accounts.layout.html -->
<div class="overlay" [class.overlay-show]="showOverlay"></div>

<div class="main">
  <img class="logo" src="/assets/google-logo.svg" alt="google logo" />
  <div class="section">
    <div class="left-content">
      <span class="com-headline-5">{{ title }}</span>
      <span class="com-headline-6">{{ description }}</span>
    </div>
    <div class="right-content">
      <!-- 子路由组件将直接渲染在这里 -->
      <router-outlet />
    </div>
  </div>
</div>

3. 调整子路由组件模板，将输入和操作按钮直接放在组件内：

<!-- sign-in-identifier.page.html -->
<div class="content">
  <com-input-text
    #inputEmail
    placeholder="Email"
    [(value)]="email"
    [errorMessage]="errorMessage"
  />

  <div class="actions">
    @if (isCreateAccountEnabled) {
      <com-button-basic (buttonClick)="onCreateAccount()">Create account</com-button-basic>
    }
    <com-button-flat
      (buttonClick)="onNext()"
      [disabled]="isLoading"
      >Next</com-button-flat
    >
  </div>
</div>

注：布局所需的标题、描述等参数可通过路由数据（data 属性）或共享服务传递。

内容的提问来源于stack exchange，提问作者Jason Rich Darmawan