Angular: проблема с Singleton Service, реализованная с помощью внедрения зависимостей - PullRequest
Новая
       15

Angular: проблема с Singleton Service, реализованная с помощью внедрения зависимостей

0 голосов
/ 21 мая 2019

Я реализовал Singleton Service (т. Е. ApiService), и я использую этот одноэлементный сервис в модуле ProductCatalog, в котором у нас есть два метода в Singleton Service, getData() и addData(), которые выводят данные и добавляют данныек массиву личных данных в сервисе ApiService .

у нас есть два компонента: product-list и product-update.мы используем этот компонент для вывода данных из приватной переменной Data из ApiService.

Ожидается, что при использовании метода addData() singleton-сервиса новые данные будут добавлены в массив данных, а при переходе к / update появится списокданные из переменной Data в компоненте обновления продукта с добавлением новых данных.

В настоящее время этого не происходит, когда мы добавляем newData в массив данных с помощью addData() метода Single Service.мы получаем только начальное состояние массива данных без отражения вновь добавленных данных.

Поэтому, похоже, я пропускаю какой-то шаг или реализацию.Пожалуйста, помогите в решении этой проблемы.

Вот ссылка на код.https://stackblitz.com/edit/angular-2uyx3a

Ответы [ 2 ]

1 голос
/ 21 мая 2019

Хорошо, я думаю, что вы переходите, изменяя URL-адрес в браузере, поскольку в приведенном примере нет способа навигации, что, безусловно, не сработает, поскольку при изменении URL-адреса вы фактически перезагружаете свое приложение, которое удаляет все данные в памяти вашего приложения.

Ваш сервис работает нормально, вам просто нужно перемещаться с помощью @ angular / router, и нет, он не может обрабатывать изменения URL вручную, и никакие ничто иное не может сделать это.

Но он будет обрабатывать ссылки через routerLink подробнее об этом здесь - официальные документы маршрутизатора

внутри product-list.component.html 


product-listing works!

<p *ngFor="let item of sampleData">{{ item.id }} -{{ item.name }}</p>

<!-- Example of using routerLink -->
<a routerLink="/update">go to update</a>

он также может обрабатывать динамическую маршрутизацию через службу Router, используя функции navigateTo или navigateByUrl, например:

внутри product-update.component.ts 


 // product-update.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router'
import { FormGroup, FormControl, FormArray } from '@angular/forms';
import { ApiService } from '../../core/api.service';
@Component({
  selector: 'app-product-update',
  templateUrl: './product-update.component.html',
  styleUrls: ['./product-update.component.css']
})
export class ProductUpdateComponent implements OnInit {
  dataForm: FormGroup;

  // do not forget to import the service
  constructor(private api: ApiService, private router: Router) {}

  ngOnInit() {
    this.dataForm = new FormGroup({
      id: new FormControl(' '),
      name: new FormControl(' ')
    });
  }

  saveData() {
    this.api.addData({
      id: this.dataForm.controls.id.value,
      name: this.dataForm.controls.name.value
    });
    // Use of router service `navigateByUrl` to dynamically redirect to another view
    this.router.navigateByUrl('/listing')
  }
}

Но чтобы любой из этих методов маршрутизации работал, вам нужно добавить RouterModule.forChild() к импорту модуля, включая объявления этих компонентов. Как это:

внутри product-catalog.module.ts 


import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';
import {CoreModule } from '../core/core.module';
import { RouterModule } from '@angular/router';

import { ProductListingComponent } from './product-listing/product-listing.component';
import { ProductUpdateComponent } from './product-update/product-update.component';

@NgModule({
  imports: [
    CommonModule,    ReactiveFormsModule,
    CoreModule.forRoot(),
    RouterModule.forChild([]) // Add this to the imports
  ],
  declarations: [ProductListingComponent, ProductUpdateComponent]
})
export class ProductCatalogModule { }

Если вы так и протестируете свой сервис как есть, вы обнаружите, что он работает отлично.

Но опять же, когда вы вручную изменяете URL в браузере, вы перезагружаете свое приложение, которое удаляет всю память / данные приложения, если они не сохранены в бэкэнде.

Вот ссылка на проект редактирования https://stackblitz.com/edit/angular-z2m9ri

Надеюсь, это было полезно

1 голос
/ 21 мая 2019

Вам не нужно forRoot в основном модуле.Вы уже предоставили службу в корневом каталоге: 

@Injectable(
  providedIn: 'root'
)

Это означает, что служба доступна в корневом инжекторе приложения.Основной модуль в этом контексте бесполезен.

Вот ваш работающий стек-код

Я рекомендую вам взглянуть на документацию Angular для получения дополнительной информации:

Иерархическая инъекция зависимостей

Singleton Services

Следует отметить одну вещь: если вы обновляете браузер или изменяете маршрут из адресной строки браузера,государство потеряется.

...