счетчик в .Net Core Angular 5 машинопись

Question

Я попытался реализовать компонент / службу счетчика машинописного текста, как определено здесь ( Как выполнить загрузку счетчиков, способ Angular 2+ ) в .Net Core 2 / Angular 5.

при загрузке страницы, содержащей тег spinner:

<spinner name="skuLoadSpinner" [(show)]="showSpinner"></spinner>

Я получаю следующую ошибку:

Uncaught Error: Template parse errors:
Can't bind to 'show' since it isn't a known property of 'spinner'. ("ft;width:50%;">
          <label for="power">SKU</label>
          <spinner name="skuLoadSpinner" [ERROR ->][(show)]="showSpinner"></spinner>
          <select style="" class="form-control" id="sku"
        "): ng:///AppModule/SkuRegistrationComponent.html@125:41
'spinner' is not a known element:
1. If 'spinner' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

Вот мой текущий spinner.service.ts:

import { Injectable } from '@angular/core';
import { SpinnerComponent } from './spinner.component';

@Injectable()
export class SpinnerService {
  private spinnerCache = new Set<SpinnerComponent>();

  _register(spinner: SpinnerComponent): void {
    this.spinnerCache.add(spinner);
  }

  show(spinnerName: string): void {
    this.spinnerCache.forEach(spinner => {
      if (spinner.name === spinnerName) {
        spinner.show = true;
      }
    });
  }

  hide(spinnerName: string): void {
    this.spinnerCache.forEach(spinner => {
      if (spinner.name === spinnerName) {
        spinner.show = false;
      }
    });
  }

  showGroup(spinnerGroup: string): void {
    this.spinnerCache.forEach(spinner => {
      if (spinner.group === spinnerGroup) {
        spinner.show = true;
      }
    });
  }

  hideGroup(spinnerGroup: string): void {
    this.spinnerCache.forEach(spinner => {
      if (spinner.group === spinnerGroup) {
        spinner.show = false;
      }
    });
  }

  showAll(): void {
    this.spinnerCache.forEach(spinner => spinner.show = true);
  }

  hideAll(): void {
    this.spinnerCache.forEach(spinner => spinner.show = false);
  }

  _unregister(spinnerToRemove: SpinnerComponent): void {
    this.spinnerCache.forEach(spinner => {
      if (spinner === spinnerToRemove) {
        this.spinnerCache.delete(spinner);
      }
    });
  }
}

А вот мой файл spinner.component.ts:

import { Component, Input, OnInit, EventEmitter, Output, OnDestroy } from '@angular/core';
import { SpinnerService } from './spinner.service';

@Component({
  selector: 'spinner',
  template: `
    <div *ngIf="show">
      <img *ngIf="loadingImage" [src]="loadingImage" />
      <ng-content></ng-content>
    </div>
  `
})
export class SpinnerComponent implements OnInit, OnDestroy {
  @Input() name: string;
  @Input() group: string;
  @Input() loadingImage: string;
  @Input() show = false;

  constructor(private spinnerService: SpinnerService) { }

  ngOnInit(): void {
    if (!this.loadingImage) throw new Error("Spinner must have a loadingImage supplied.");

    this.spinnerService._register(this);
  }

  private isShowing = false;

  @Input()
  get show(): boolean {
    return this.isShowing;
  }

  @Output() showChange = new EventEmitter();

  set show(val: boolean) {
    this.isShowing = val;
    this.showChange.emit(this.isShowing);
  }

  ngOnDestroy(): void {
    this.spinnerService._unregister(this);
  }
}  

Answer 1

Я бы предложил поместить декоратор Input() в 'setter' вместо 'getter'. Несмотря на то, что оба они действительны, включение их в метод получения означает, что вы могли бы столкнуться с проблемами, если у вас (по какой-то причине) было другое имя для метода установки.

Я рекомендую изменить на:

  get show(): boolean {
    return this.isShowing;
  }

  @Input()
  set show(val: boolean) {
    this.isShowing = val;
    this.showChange.emit(this.isShowing);
  }

Кроме того, удалите поле show, поскольку оно даже не устанавливается, поскольку вы добавили isShowing в качестве поля.

Редактировать 1:

Вам также необходимо убедиться, что вы импортировали и объявили компонент счетчика в вашем Module. Перейдите к Module, в котором вы работаете (скорее всего, AppModule, если вы не создали общий).

Добавьте оператор импорта вверху, а затем также в массив declarations Module.

Редактировать 2:

Как указывал @littleGreenDude, также добавьте туда оператор импорта для SpinnerService, но поместите его в массив providers вместо массива declarations. Это регистрирует службу в контейнере Angular DI (Dependency Injection), чтобы он мог инициализировать его, чтобы другие компоненты могли вставить его в них.