如何在 Angular 中通过路由重用layout.component.ts？

Question

我的目标是将

accounts.layout.ts

重复用于 2 个路径

/v3/signin/identifier

和

/v3/signin/challenge/pwd

。

问题是

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

与

<router-outlet/>

配合不好

我尝试过的：

1. 创建一个

   accounts.layout.ts

如果我在

sign-in-identifier.page.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>

2. 尝试将其与

   <router-outlet />

    中的 

   app.component.html
一起使用

app.component.html

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

预期结果：

实际结果：

Answer 1

您必须创建一个包装器组件，在其中显式指定

ng-content

，因为当您通过

router-outlet

运行它时，选择器查询将不起作用！

所以你的app.component.html

<router-outlet />

路由器出口中渲染的所有路由都会有

acc-accounts

包裹在其周围！

<acc-accounts>
  <!-- your component contents inside here -->
</acc-accounts>