Angular 16独立组件能否实现继承？求可运行完整示例

首先明确：独立组件继承时，不需要将父组件添加到子组件的imports数组——imports是用来声明组件模板中要用到的外部依赖（比如其他组件、指令、管道），而继承是类层面的代码复用，和模板依赖无关，这是你之前出错的核心原因。

以下是完整可运行的示例：

1. 父组件（独立组件） #

import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'base-page',
  template: `
    <div class="base-container">
      <h2>{{ pageTitle }}</h2>
      <ng-content></ng-content> <!-- 插槽供子组件填充内容 -->
    </div>
  `,
  standalone: true,
  styles: [`
    .base-container { padding: 1rem; border: 1px solid #eee; }
  `]
})
export class PageComponent implements OnInit, OnDestroy {
  pageTitle = '基础页面';

  ngOnInit(): void {
    console.log('父组件 OnInit 执行');
  }

  ngOnDestroy(): void {
    console.log('父组件 OnDestroy 执行');
  }

  // 父组件提供的可复用方法
  protected logMessage(message: string): void {
    console.log(`[页面日志]: ${message}`);
  }
}

2. 子组件（继承父组件的独立组件） #

import { Component } from '@angular/core';
import { PageComponent } from './page.component';

@Component({
  selector: 'page-drawer',
  template: `
    <div class="drawer-content">
      <p>这是抽屉页面的内容</p>
      <button (click)="callParentMethod()">调用父组件方法</button>
    </div>
  `,
  standalone: true,
  styles: [`
    .drawer-content { margin-top: 1rem; padding: 1rem; background: #f5f5f5; }
  `]
})
export class PageDrawerComponent extends PageComponent {
  // 重写父组件的标题
  pageTitle = '抽屉页面';

  ngOnInit(): void {
    super.ngOnInit(); // 调用父组件的OnInit逻辑
    this.logMessage('子组件 OnInit 执行');
  }

  callParentMethod(): void {
    this.logMessage('点击了子组件按钮');
  }
}

3. 在路由中使用（无NgModule） #

import { provideRouter, Routes } from '@angular/router';
import { PageDrawerComponent } from './page-drawer.component';

export const routes: Routes = [
  { path: '', component: PageDrawerComponent }
];

export const appConfig = {
  providers: [provideRouter(routes)]
};

4. 主入口文件（main.ts） #

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';

bootstrapApplication(undefined, appConfig)
  .catch(err => console.error(err));

关键注意事项 #

• 子组件不需要在imports中引入父组件，因为继承是类继承，不属于模板依赖
• 如果父组件的模板中有需要的依赖（比如指令、管道），父组件自身的imports已经声明，子组件继承后会自动生效
• 重写生命周期钩子时，记得用super调用父组件的对应方法，避免逻辑丢失
• 确保所有组件都标记为standalone: true，不需要任何@NgModule

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