1

我正在尝试学习 Angular 并且遇到了可能是一个非常简单的问题。

我已经编写了一个名为“PageSelectorComponent”的用于进行网格分页的子组件。该组件仅获取总记录数并计算和显示页面链接（此组件中不使用提供程序）。我已将此组件嵌入到另一个名为“TestComponent”的组件中。

PageSelectorComponent 和 Test Component 包含在我的 app.module.ts 文件的 delarations 部分中。

我的问题是我收到以下错误：

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

如果我将 PageSelectorComponent 添加到 app.module.ts 的提供程序部分，一切正常，除了现在我得到了该组件的两个实例。这导致我的订阅不起作用。

我查看了 PageSelectorComponent 和 TestComponent 是如何声明的，但没有发现区别。

为什么应用程序抱怨没有将 PageSelectorComponent 列为提供者？

这是我的 app.modules.ts 的 NgMoudle 部分：

@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();
  }

就像我说的，我认为我在这里错过了一些非常基本的 Angular 东西。关于在哪里看的任何建议？

提前致谢！

4

1 回答 1

0

非常感谢 masterpreenz 让我明白这一点。

我将用我现在对 Angular 的理解来回答这个问题以结束线程。由于我是新手，如果我仍然有错误，请告诉我！

正如预期的那样，这是对主题/观察者模式的基本误解。事实证明，我试图从组件 1 中创建一个新主题，为此我将让另一个组件 2 观察并对点击做出反应。要访问组件 1 的主题，需要在构造函数中实例化组件 2。

constructor(private pager: coomponent1) {}

这将 component1 视为服务（因为它正在被注入），这就是为什么我需要将它包含在 app.module 的声明和提供程序部分中。

做到这一点的方法（我确定不是唯一的方法）是创建一个处理逻辑的服务。component1 然后可以在单击时调用该服务。component2 然后可以订阅该服务。

实际上，这允许 component2 对来自 component1 的点击做出反应。

于 2017-09-01T21:44:13.593 回答