Угловое обслуживание, не входящее в модуль

Question

Я работаю над проектом Angular, в котором я ленив, загружая функциональные модули, и я столкнулся с странной ошибкой в ​​одном из моих модулей.

Я предоставляю услугу на уровне модуля, используя свойство «providers» NgModule. Я ожидал бы (и имел возможность использовать службы таким образом раньше), что служба будет разделяться всеми компонентами модуля. Однако, когда я внедряю службу в компоненты в моем модуле, они вводятся как отдельные экземпляры.

В моем проекте у меня есть два компонента, которые я наблюдал в этом списке, компонент списка и компонент редактирования. Я устанавливаю значение в своей службе, пока я в компоненте списка, который я пытаюсь использовать с компонентом редактирования, но когда я перехожу из компонента List в компонент «Редактировать», служба повторно создается и такая же когда я перехожу из компонента «Редактировать компонент в список».

Кто-нибудь знает, что может быть причиной этого? Ранее я мог использовать общие службы в модулях, поэтому я не уверен, что я делаю неправильно.

Вот код для компонентов, модуль, и обслуживание:

Список компонентов:

import { Component, OnInit } from '@angular/core'; 
import { Observable } from 'rxjs'; 
import { Project } from '../../../shared/models/project'; 
import { ProjectService } from '../../project.service'; 
import { Router } from '@angular/router'; 

@Component({ 
    selector: 'app-project-list-main', 
    templateUrl: './project-list-main.component.html', 
    styleUrls: ['./project-list-main.component.scss'] 
}) 
export class ProjectListMainComponent implements OnInit { 
    private projects$: Observable<Project[]>; 
    private selectedItem: Project; 

    onSelectedItem(event){ 
    this.selectedItem = event; 
    } 

    editProject(){ 
    this.projectService.setEditProject(this.selectedItem); 
    this.router.navigateByUrl('/pages/projects/edit'); 
    } 

    deleteProject(){ 
    this.projectService.delete(this.selectedItem.id); 
    } 

    constructor(private router: Router, private projectService: ProjectService) { } 

    ngOnInit() { 
    this.projects$ = this.projectService.projects; 
    } 
} 

Редактировать компонент:

import { Component, OnInit, Input } from '@angular/core'; 
import { Validators, FormGroup, FormArray, FormBuilder } from '@angular/forms'; 
import { ProjectService } from '../../project.service'; 
import { Project } from '../../../shared/models/project'; 
import { Router } from '@angular/router'; 

@Component({ 
    selector: 'app-project-edit-main', 
    templateUrl: './project-edit-main.component.html', 
    styleUrls: ['./project-edit-main.component.scss'] 
}) 
export class ProjectEditMainComponent implements OnInit { 
    public projectForm: FormGroup; 
    @Input() editProject: Project; 

    constructor(private fb: FormBuilder, private router: Router, private projectService: ProjectService) { } 

    saveProject(event){ 
    this.projectService.add(event); 
    this.router.navigateByUrl('/pages/projects'); 
    } 

    ngOnInit() { 
    this.projectForm = this.fb.group({ 
     name: ['',Validators.required], 
     description: [''], 
     type: ['', Validators.required] 
    }); 
    this.projectService.editProject.subscribe(editProject => { 
     if(editProject) 
     this.projectForm.patchValue(editProject); 
    }); 
    } 
} 

Услуги:

import { Injectable } from "@angular/core"; 
import { BehaviorSubject } from "rxjs/BehaviorSubject"; 
import { Observable } from "rxjs/Observable"; 
import { Project } from "../shared/models/project"; 
import { DataService } from "../shared/services/data.service"; 
import { Router } from "@angular/router"; 
import { AlertService } from "../shared/alert/alert.service"; 

@Injectable() 
export class ProjectService { 
    private _projects: BehaviorSubject<Project[]> = new BehaviorSubject([]); 
    projects: Observable<Project[]> = this._projects.asObservable(); 
    private _editProject: BehaviorSubject<Project> = new BehaviorSubject(null); 
    editProject: Observable<Project> = this._editProject.asObservable(); 

    editing: boolean = false; 

    private dataStore: { 
     projects: Project[] 
    }; 

    loadall() { 
     this.dataService.GetAll("projects") 
      .subscribe(projects => { 
       this.dataStore.projects = projects; 
       this._projects.next(Object.assign({}, this.dataStore).projects); 
      }, error => { 
       console.log(error); 
       this.alertService.error('Error', 'Encountered error while loading Projects'); 
      }); 
    } 

    setEditProject(editProject: Project){ 
     this._editProject.next(editProject); 
     this.editing = true; 
    } 

    add(project: Project) { 
     this.dataService.Add('projects', project).subscribe(project => { 
      this.dataStore.projects.push(project); 
      this._projects.next(Object.assign({}, this.dataStore).projects); 
     }, error => { 
      console.log(error); 
      this.alertService.error('Error', 'Encountered error while adding Project'); 
     }); 
    } 

    update(project: Project) { 
     let editId = this._editProject.getValue().id; 
     project.id = editId; 
     this.dataService.Update('projects', editId, project).subscribe(() => { 
      this.dataStore.projects.forEach((p, i) => { 
       if (p.id === project.id) { this.dataStore.projects[i] = project; } 
      }); 
      this._projects.next(Object.assign({}, this.dataStore).projects); 
     }, error => { 
      console.log(error); 
      this.alertService.error('Error', 'Encountered error while updating Project'); 
     }); 
     this.editing = false; 
     this._editProject.next(null); 
    } 

    delete(id: number) { 
     this.dataService.Delete('projects', id).subscribe(response => { 
      this.dataStore.projects.forEach((p, i) => { 
       if (p.id === id) { this.dataStore.projects.splice(i, 1); } 
      }); 
      this._projects.next(Object.assign({}, this.dataStore).projects); 
     }, error => { 
      console.log(error); 
      this.alertService.error('Error', 'Encountered error while deleting Project'); 
     }); 
    } 



    constructor(private router: Router, private dataService: DataService, private alertService: AlertService) { 
     this.dataStore = { projects: [] }; 
     this.loadall(); 
    } 
} 

Модуль :

import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 
import { ProjectRoutingModule } from './project-routing.module'; 

// Primeng module imports 
import { CalendarModule, DataTableModule, DialogModule, ConfirmDialogModule, ConfirmationService, PanelModule, DropdownModule } from 'primeng/primeng'; 

// Dumb components 
import { ProjectEditComponent } from './edit/project-edit.component'; 
import { ProjectListComponent } from './list/project-list.component'; 
import { ProjectCardComponent } from './card/project-card.component'; 
import { ProjectDetailComponent } from './detail/project-detail.component'; 
import { ProjectDeleteOptionsComponent } from './delete/project-delete-options.component'; 

// Containers 
import { ProjectEditMainComponent } from './containers/project-edit-main/project-edit-main.component'; 
import { ProjectListMainComponent } from './containers/project-list-main/project-list-main.component'; 
import { ProjectComponent } from './project.component'; 

// Services 
import { ProjectService } from './project.service'; 

@NgModule({ 
    imports: [ 
    CommonModule, 
    ProjectRoutingModule, 
    FormsModule, 
    ReactiveFormsModule, 
    DataTableModule, 
    DropdownModule, 
    PanelModule 
    ], 
    declarations: [ 
    ProjectCardComponent, 
    ProjectDetailComponent, 
    ProjectEditComponent, 
    ProjectListComponent, 
    ProjectDeleteOptionsComponent, 
    ProjectComponent, 
    ProjectEditMainComponent, 
    ProjectListMainComponent 
    ], 
    providers: [ProjectService] 
}) 
export class ProjectModule { } 

Answer 1

Вам только нужно импортировать еще один модуль (A), если вам нужно следующее:

• директиву, компонента или трубы из импортируемого модуля (A)

Зная это , если вы импортируете модуль (A), который также предоставляет услугу, и вы получите новый экземпляр этой службы, тогда этот модуль (A) мог быть ошибочно настроен, так как вы ожидали, что служба будет прикладной, широкий синглтон.

Стандартный модуль регистрирует службы, доступные для базовых компонентов. Общий модуль, если он также хочет, чтобы служба была разделена, регистрирует службы в корне приложения, это можно сделать с помощью метода .forRoot().

import { NgModule, ModuleWithProviders } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 

import { authObjService } from './service/authObj'; 
import { loginGuard } from './service/loginGuard'; 
import {loginButton} from './directive/login-button/login-button' 
import {logoutButton} from './directive/logout-button/logout-button' 


@NgModule({ 
    declarations: [loginButton, logoutButton], 
    imports: [CommonModule], 
    exports: [loginButton, logoutButton], 
}) 

export class authenticationModule { 
    static forRoot(): ModuleWithProviders { 
     return { 
      ngModule: authenticationModule, 
      providers: [authObjService, loginGuard] 
     } 
    } 
}