Angular 5模板复用求助：登录/注册路由模板相似无简洁方案

嘿，我太懂你这种重复写相似模板的痛苦了！针对Angular 5里登录/注册页面的模板复用，我给你整理了几个简洁实用的方案，你可以根据项目情况选：

这是最符合Angular组件化思想的方案，把公共的布局结构抽离到父组件，登录和注册组件只负责差异内容（比如标题、表单字段、提交逻辑）。

首先创建一个基础认证组件：

// auth-base.component.ts
import { Component, Input } from '@angular/core';

@Component({
  template: `
    <div class="main-container">
      <section class="fullwidth-split">
        <div class="container-fluid">
          <div class="row">
            <div class="col-12">
              <!-- 公共的头部、样式框架等 -->
              <h2>{{ pageTitle }}</h2>
            </div>
            <div class="col-12">
              <!-- 用内容投影插入差异内容 -->
              <ng-content></ng-content>
            </div>
          </div>
        </div>
      </section>
    </div>
  `
})
export class AuthBaseComponent {
  @Input() pageTitle: string;
}

然后登录组件继承这个父组件，只写自己的表单和逻辑：

// login.component.ts
import { Component } from '@angular/core';
import { AuthBaseComponent } from './auth-base.component';

@Component({
  template: `
    <app-auth-base [pageTitle]="'Login'">
      <!-- 登录专属表单 -->
      <form (ngSubmit)="handleLogin()">
        <input type="email" placeholder="邮箱" [(ngModel)]="email" name="email" required>
        <input type="password" placeholder="密码" [(ngModel)]="password" name="password" required>
        <button type="submit">登录</button>
      </form>
    </app-auth-base>
  `
})
export class LoginComponent extends AuthBaseComponent {
  email: string;
  password: string;

  handleLogin() {
    // 你的登录逻辑
  }
}

注册组件同理，只需要把pageTitle改成'Register'，替换成注册表单即可。

如果不想搞组件继承，这种轻量方案也很适合。把公共结构写成可复用的模板，然后在登录/注册组件里传入不同的上下文和内容。

先定义公共模板（可以放在单独的文件或者某个共享组件里）：

<!-- auth-shared.tpl.html -->
<ng-template #authLayout let-title="title" let-formContent="formContent">
  <div class="main-container">
    <section class="fullwidth-split">
      <div class="container-fluid">
        <div class="row">
          <div class="col-12">
            <h2>{{ title }}</h2>
          </div>
          <div class="col-12">
            <ng-container *ngTemplateOutlet="formContent"></ng-container>
          </div>
        </div>
      </div>
    </section>
  </div>
</ng-template>

然后在登录组件里引用这个模板：

<!-- login.component.html -->
<ng-container *ngTemplateOutlet="authLayout; context: { title: 'Login', formContent: loginForm }"></ng-container>

<ng-template #loginForm>
  <form (ngSubmit)="handleLogin()">
    <!-- 登录表单内容 -->
  </form>
</ng-template>

把公共的页面布局拆成一个独立的UI组件，登录和注册组件作为它的子内容插入，这种方式更直观，也方便后续其他相似页面复用。

创建布局组件：

// auth-layout.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'auth-layout',
  template: `
    <div class="main-container">
      <section class="fullwidth-split">
        <div class="container-fluid">
          <div class="row">
            <div class="col-12">
              <h2>{{ title }}</h2>
            </div>
            <div class="col-12">
              <ng-content></ng-content>
            </div>
          </div>
        </div>
      </section>
    </div>
  `
})
export class AuthLayoutComponent {
  @Input() title: string;
}

登录组件里直接使用这个布局组件：

<!-- login.component.html -->
<auth-layout title="Login">
  <form (ngSubmit)="handleLogin()">
    <!-- 登录表单 -->
  </form>
</auth-layout>

这三个方案都能帮你彻底消除模板重复代码，其中方案1和3更适合长期维护，结构也更清晰。根据你的项目复杂度选就行！

内容的提问来源于stack exchange，提问作者Gabriel Veloso