Question

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

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

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

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

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

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

我已经了解了如何声明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();
  }

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

提前致谢！

Answer 1

非常感谢masterpreenz让我直截了当。

我将回答这个问题以了解我现在理解Angular的方式。由于我是新手，请告诉我，如果我还有错！

正如所料，这是对主题/观察者模式的基本误解。事实证明，我试图从component1中创建一个新的Subject，我将要另外一个component2观察并对点击作出反应。要访问component1的主题，需要在构造函数中实例化component2。

constructor(private pager: coomponent1) {}

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

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

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

为什么我的Angular2控件需要作为提供程序包含在内？

1 个答案: