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

Question

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

首先，我通过来解决了这个问题EventEmitter。但是由于我必须logout为每个新页面提供一个功能，因此我想通过每个项目的一项服务来解决此问题。我PageService使用forRoot()Angular Component Library 的方法传递了（Project）。

一切都按期望进行，但是想知道是否有更好的解决方案，或者该解决方案是否值得推荐？

我是Angular的新手，但我还是有点不安全。我希望你明白我想要的。我的英语不是最好的。：D

我对此有以下解决方案：

组件库-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;

}

---

这是项目中的用法：

项目-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!');
  }
}

Answer 1

我使用了这种方法，但遇到了一个问题：

该PageService不是在图书馆同单实例作为应用。因为它在多个模块（应用程序模块和库模块）中提供，所以它为每个模块创建一个新实例。

我最终做的是通过string应用程序模块中的a 提供我的服务：

// app.module.ts in the root application
providers: [
  {
    provide: 'PageService',
    useClass: PageService
  }
]

然后在需要使用的地方注入服务 @Inject()

// anywhere in the root application where the service is needed
constructor(@Inject('PageService') private pageService: PageService) {}

然后，在库中，我创建了一个简单的界面：

export interface AbstractPageService {
  logout(): void;
}

然后，我可以简单地通过Inject()装饰器将服务注入库中并使用接口键入（无需在根应用程序中实现该接口）：

// anywhere in the library where the service is needed
constructor(@Inject('PageService') private pageService: AbstractPageService) {}

现在根应用程序和库都使用PageService根应用程序中提供的相同的单例实例。