Почему мой контроль Angular2 должен быть включен в качестве поставщика?

Question

Я пытаюсь изучить Angular и столкнулся с тем, что, вероятно, очень простая проблема.

Я написал дочерний компонент для выполнения разбивки по сетке под названием "PageSelectorComponent". Этот компонент просто берет общее количество записей, вычисляет и отображает ссылки на страницы (в этом компоненте провайдеры не используются). Я встроил этот компонент в другой компонент под названием "TestComponent".

PageSelectorComponent и тестовый компонент включены в раздел delarations моего файла app.module.ts.

Моя проблема в том, что я получаю следующую ошибку:

ERROR Error: Uncaught (in promise): Error: No provider for PageSelectorComponent!

Если я добавлю PageSelectorComponent в раздел поставщиков в app.module.ts, все будет работать нормально, за исключением того, что теперь я получаю два экземпляра компонента. Это заставляет мою подписку не работать.

Я посмотрел, как объявлены PageSelectorComponent и TestComponent, но не вижу разницы.

Почему приложение жалуется на отсутствие списка PageSelectorComponent в качестве поставщика?

Вот раздел NgMoudle моего app.modules.ts:

@NgModule({
  declarations: [
    AppComponent,
    NavigationComponent,
    HomeComponent,
    PageSelectorComponent,
    TestComponent,
  ],
  imports: [
    BrowserModule,
    RoutingModule,
  ],
  providers: [
    PageSelectorComponent // App complains if I leave this out but now I get 2 instances of the component.
  ],
  bootstrap: [AppComponent]
})

Вот определение для PageSelectorComponent:

@Component({
    moduleId: module.id,
    selector: 'app-page-selector',
    templateUrl: './page-selector.component.html',
    styleUrls: ['./page-selector.component.css'],
})

export class PageSelectorComponent {
  // member variables declared here
     .
     .
  private static instanceNum: number = 0; // TOOD: debugging

  constructor() {
    PageSelectorComponent.instanceNum += 1;
    console.log(`page-selector instance number ${PageSelectorComponent.instanceNum}`)
    this.subject = new Subject();
  }

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

Заранее спасибо!

Answer 1

Большое спасибо masterpreenz за то, что он прямо сказал мне об этом.

Я отвечу на это, чтобы закрыть ветку с тем, как я понимаю Angular сейчас. Поскольку я новичок в этом, пожалуйста, дайте мне знать, если я все еще не так!

Как и ожидалось, это было базовое недопонимание шаблона субъекта / наблюдателя. Как оказалось, я пытался создать новый Subject из компонента component1, для которого я собирался заставить другой компонент2 наблюдать и реагировать на щелчки. Чтобы получить доступ к предмету component1, в конструкторе нужно было создать экземпляр component2.

constructor(private pager: coomponent1) {}

Это рассматривает component1 как сервис (потому что он внедряется), поэтому мне нужно было включить его в раздел объявлений и провайдеров app.module.

Способ сделать это (я уверен, не единственный способ) - создать сервис, который обрабатывает логику. После этого компонент1 может вызвать сервис, когда на него нажали. Затем компонент2 может подписаться на услугу.

Фактически это позволяет component2 реагировать на щелчки компонента1.