Angular 5：如何让Project X的header.Component.ts继承共享项目同名组件？

Got it, let's walk through this step by step—assuming you're working with an Angular project (since you're using .component.ts files), but the core TypeScript inheritance logic applies to other frameworks too.

1. Ensure the Shared Header Component is Exported #

First, make sure your shared header.component.ts is set up to be imported elsewhere. In your shared project's file:

// sharedComponent/src/app/header/header.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'shared-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class SharedHeaderComponent {
  // Use `protected` for properties/methods you want the child to access
  protected pageTitle = 'Default App Title';

  protected handleLogout() {
    // Shared logout logic
    console.log('Initiating logout from shared component');
  }
}

Important: Avoid private for members you want the child component to inherit—protected or public is required.

2. Import and Extend the Shared Component in Project X #

In Project X's header.component.ts, import the shared component and extend it with your project-specific class. Adjust the import path to match how your shared project is referenced (e.g., workspace project, npm package, or local link):

// ProjectX/src/app/header/header.component.ts
import { Component } from '@angular/core';
import { SharedHeaderComponent } from 'sharedComponent'; // Update path as needed

@Component({
  selector: 'project-x-header', // Unique selector for your Project X header
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class ProjectXHeaderComponent extends SharedHeaderComponent {
  // Override shared properties
  override pageTitle = 'Project X Dashboard';

  // Override shared methods, and call parent logic with `super()`
  override handleLogout() {
    super.handleLogout(); // Run shared logout code first
    console.log('Adding Project X-specific cleanup after logout');
  }

  // Add new methods exclusive to Project X's header
  protected showProjectNotifications() {
    console.log('Displaying Project X notification panel');
  }
}

3. Handle Template/Style Customization #

If your Project X header needs a unique UI, define its own template/styles in the @Component decorator—these will replace the shared component's defaults. If you want to reuse parts of the shared template, include the shared component selector in your Project X template:

<!-- ProjectX/src/app/header/header.component.html -->
<shared-header></shared-header>
<!-- Add Project X-only content below -->
<div class="project-x-actions">
  <button (click)="showProjectNotifications()">View Notifications</button>
</div>

4. Register the Component in Project X's Module #

Don't forget to declare your new header component in your Project X module, and import the shared module if the shared header is part of one:

// ProjectX/src/app/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SharedModule } from 'sharedComponent'; // Import shared module if needed
import { ProjectXHeaderComponent } from './header/header.component';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
    ProjectXHeaderComponent
  ],
  imports: [
    BrowserModule,
    SharedModule // Include this if your shared header lives in a shared module
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Quick Tips: #

• If the shared component uses dependency injection (like HttpClient), the child component inherits those dependencies automatically—no need to re-inject unless you want to override them.
• Use super() in the child constructor if the parent component has required parameters.

That's all! Your Project X header will now inherit all the shared logic, and you can customize it to fit your project's needs.

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