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

本文介绍了带有抽象类的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/navbarponent'; import {PageComponent} from './layout/page/pageponent'; import {PageHeaderComponent} from './components/page-header/page-headerponent'; // ... 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} ] }; } }

组件库-pageponent.ts

import {Component, EventEmitter, HostBinding, Inject, Input, Output} from '@angular/core'; import {AbstractPageService} from '../../services/abstract-page.service'; @Component({ selector: 'dc-page', templateUrl: './pageponent.html', styleUrls: ['./pageponent.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 './appponent'; 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; }