Angular中如何复用控制器实现多模板绑定需求？

好问题！在Angular里确实没法像AngularJS那样直接给多个指令绑定同一个控制器类，但我们有几种很实用的方式来实现「复用核心逻辑+绑定不同模板」的需求，下面给你一步步拆解：

方法一：将共享逻辑抽离为服务（最推荐） #

Angular的设计理念更偏向于逻辑与视图分离，所以最优雅的方式是把原本控制器里的业务逻辑、数据处理抽成一个可注入的服务，然后让多个组件（每个组件绑定自己的模板）注入这个服务，从而实现逻辑复用。

举个实际例子：
首先创建共享服务，封装所有需要复用的逻辑：

import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class SharedDataService {
  // 复用的数据
  public userInfo = { name: 'Stack Overflow User', level: 5 };
  
  // 复用的方法
  public updateUserLevel(newLevel: number): void {
    this.userInfo.level = newLevel;
    console.log('用户等级已更新');
  }
}

然后创建两个独立组件，各自绑定不同模板，同时注入这个服务：

组件1（绑定模板A） #

import { Component } from '@angular/core';
import { SharedDataService } from './shared-data.service';

@Component({
  selector: 'app-profile-card',
  templateUrl: './profile-card.html' // 第一个模板
})
export class ProfileCardComponent {
  constructor(public sharedService: SharedDataService) {}
}

组件2（绑定模板B） #

import { Component } from '@angular/core';
import { SharedDataService } from './shared-data.service';

@Component({
  selector: 'app-user-dashboard',
  templateUrl: './user-dashboard.html' // 第二个模板
})
export class UserDashboardComponent {
  constructor(public sharedService: SharedDataService) {}
}

之后在各自的模板里，就可以直接调用服务里的属性和方法了，比如profile-card.html：

<div class="profile-card">
  <h3>{{ sharedService.userInfo.name }}</h3>
  <p>等级：{{ sharedService.userInfo.level }}</p>
  <button (click)="sharedService.updateUserLevel(6)">升级</button>
</div>

这种方式的优势在于逻辑完全解耦，服务可以被任意组件复用，符合Angular的最佳实践。

方法二：创建抽象基类，让组件继承 #

如果你的多个组件除了共享逻辑外，还有各自的少量特有逻辑，可以创建一个抽象基类封装共享部分，然后让组件继承这个基类，各自绑定不同模板。

示例：
首先定义抽象基类（不要加@Component装饰器）：

import { OnInit } from '@angular/core';

export abstract class BaseComponent implements OnInit {
  protected sharedValue = '这是所有组件共享的值';
  
  ngOnInit(): void {
    this.initSharedLogic();
  }
  
  protected initSharedLogic(): void {
    console.log('执行所有组件都需要的初始化逻辑');
  }
  
  public sharedMethod(): string {
    return '返回共享的计算结果';
  }
}

然后创建继承基类的组件：

组件A #

import { Component } from '@angular/core';
import { BaseComponent } from './base.component';

@Component({
  selector: 'app-component-a',
  templateUrl: './component-a.html'
})
export class ComponentA extends BaseComponent {
  // 组件A特有的属性
  public uniquePropA = '组件A独有的内容';
  
  // 可以重写基类方法（如果需要）
  protected initSharedLogic(): void {
    super.initSharedLogic();
    console.log('组件A额外的初始化逻辑');
  }
}

组件B #

import { Component } from '@angular/core';
import { BaseComponent } from './base.component';

@Component({
  selector: 'app-component-b',
  templateUrl: './component-b.html'
})
export class ComponentB extends BaseComponent {
  // 组件B特有的方法
  public uniqueMethodB(): void {
    console.log('组件B独有的操作');
  }
}

这种方式适合组件之间有较强共性的场景，既复用了核心逻辑，又保留了组件的扩展性。

方法三：用ngTemplateOutlet实现单组件多模板 #

如果你的需求是同一个组件类，需要根据不同场景切换不同模板，而不是创建多个组件，可以用Angular的ngTemplateOutlet指令来动态加载模板。

示例：
首先创建核心组件类，封装所有共享逻辑：

import { Component, Input, TemplateRef } from '@angular/core';

@Component({
  selector: 'app-dynamic-view',
  template: `
    <!-- 动态加载传入的模板，并把当前组件实例作为上下文传递 -->
    <ng-container *ngTemplateOutlet="activeTemplate; context: { $implicit: this }"></ng-container>
  `
})
export class DynamicViewComponent {
  @Input() activeTemplate!: TemplateRef<any>;
  
  // 共享数据
  public productList = ['Angular实战', 'TypeScript进阶'];
  
  // 共享方法
  public addProduct(newProduct: string): void {
    this.productList.push(newProduct);
  }
}

然后在父组件中定义多个模板，并传递给动态组件：
父组件模板：

<!-- 模板1：列表样式 -->
<ng-template #listTemplate let-component>
  <h3>产品列表</h3>
  <ul>
    <li *ngFor="let item of component.productList">{{ item }}</li>
  </ul>
  <input #newItem type="text" placeholder="输入新产品">
  <button (click)="component.addProduct(newItem.value); newItem.value=''">添加</button>
</ng-template>

<!-- 模板2：卡片样式 -->
<ng-template #cardTemplate let-component>
  <h3>产品卡片墙</h3>
  <div class="card" *ngFor="let item of component.productList">
    <span>{{ item }}</span>
  </div>
  <input #newItem type="text" placeholder="输入新产品">
  <button (click)="component.addProduct(newItem.value); newItem.value=''">添加</button>
</ng-template>

<!-- 使用动态组件，分别传入不同模板 -->
<app-dynamic-view [activeTemplate]="listTemplate"></app-dynamic-view>
<app-dynamic-view [activeTemplate]="cardTemplate"></app-dynamic-view>

这种方式适合同一个逻辑需要不同UI展示的场景，不需要创建多个组件类，只需要定义不同模板即可。

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