带有抽象类的Angular库模块注入服务

问题描述

我创建了一个Angular Component Library，并通过NPM(通过Nexus)分发到了几个类似的项目.它包含一个PageComponent，而它又包含一个FooterComponent和一个NavbarComponent.在NavbarComponent中存在一个按钮，该按钮触发logout功能.此功能将通过相应项目的PageService提供.为此，我在Angular Component库中创建了AbstractPageService(PageService扩展了AbstractPageService).

I have created an Angular Component Library, which I distribute via NPM (over Nexus) to several similar projects. This contains a PageComponent, which in turn contains a FooterComponent and a NavbarComponent. In NavbarComponent exists a button, which triggers a logout function. This function is to be provided via a PageService of the respective project. For this purpose I created an AbstractPageService in the Angular Component library (PageService extends AbstractPageService).

起初，我通过EventEmitter解决了这个问题.但是由于我必须为每个新页面提供一个logout函数，因此我想通过每个项目的一项服务来解决此问题.我使用Angular Component Library的forRoot()方法传递了PageService(项目).

At first I solved this via the EventEmitter. But since I had to provide a logout function for each new page, I wanted to solve this via one service per project. I pass the PageService (Project) with using the forRoot() method of Angular Component Library.

一切正常，但是想知道是否有更好的解决方案，或者该解决方案是否值得推荐?

Everything works as desired, but wanted to know if there is a better solution or if the solution is so recommendable at all?

我对此有以下解决方案:

I have the following solution for this:

组件库-components.module.ts

import {ModuleWithProviders, NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {RouterModule} from '@angular/router';
import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';


import {NavbarComponent} from './layout/navbar/navbar.component';
import {PageComponent} from './layout/page/page.component';
import {PageHeaderComponent} from './components/page-header/page-header.component';
// ... others ...

@NgModule({
  imports: [
    CommonModule,
    RouterModule,
    FontAwesomeModule
  ],
  declarations: [
    NavbarComponent,
    PageComponent,
    // ... others ...
  ],
  exports: [
    NavbarComponent,
    PageComponent,
    // ... others ...
  ]
})
export class ComponentsModule {
  static forRoot(pageService): ModuleWithProviders {
    return {
      ngModule: ComponentsModule,
      providers: [
        {provide: 'PageService', useClass: pageService}
      ]
    };
  }
}

组件库-page.component.ts

import {Component, EventEmitter, HostBinding, Inject, Input, Output} from '@angular/core';
import {AbstractPageService} from '../../services/abstract-page.service';

@Component({
  selector: 'dc-page',
  templateUrl: './page.component.html',
  styleUrls: ['./page.component.scss']
})
export class PageComponent {

  @HostBinding('class') styleClass = 'd-flex flex-column';

  @Input() customStyleClass = null;

  @Input() showLogoutButton = true;
  // @Output() logoutButtonClick: EventEmitter<any> = new EventEmitter();

  constructor(@Inject('PageService') protected pageService: AbstractPageService) {
  }

  logout(): void {
    this.pageService.logout();
  }
}

组件库-abstract-page.service.ts

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

@Injectable()
export abstract class AbstractPageService {

  abstract logout(): void;

}

---

这里是项目中的用途:

---

And here the use in a project:

项目-app.module.ts

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';

import {AppComponent} from './app.component';
import {RouterModule, Routes} from '@angular/router';
import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';

import {ComponentsModule} from 'components';

const appRoutes: Routes = [
  {path: '', component: AppComponent},

  // otherwise redirect to home
  {path: '**', redirectTo: ''}
];


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    FontAwesomeModule,
    RouterModule.forRoot(appRoutes),
    ComponentsModule.forRoot(PageService),
  ],
  providers: [
    // {provide: 'PageService', useClass: PageService}
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

项目-page.service.ts

import {Injectable} from '@angular/core';
import {AbstractPageService} from '../../../projects/components/src/lib/services/abstract-page.service';

@Injectable({
  providedIn: 'root'
})
export class PageService extends AbstractPageService {

  constructor() {
    super();
  }

  logout() {
    console.log('Ausloggen!');
  }
}

推荐答案

正如Sunil Singh所说，普通的抽象类就是解决方案(没有@Injectable).

As Sunil Singh said, a normal abstract class is the solution (without @Injectable).

export abstract class AbstractPageService {

  abstract logout(): void;

}

这篇关于带有抽象类的Angular库模块注入服务的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！