-1

所以我一直在翻阅 Angular.io 中的文档以及 AngularFire2 的 Git Docs。在完成一些教程工作并看到它有效后，我决定尝试以“更正确”的方式做事。

我的理解是，如果您要与应用程序内不同组件中的相同数据进行交互，那么最好编写一个服务。在我的示例中，我正在使用 Angular2/4 构建一个小型 CMS？并使用firebase来存储数据。

所以我写了第一部分，管理员可以在主页上更改他的 CTA。所以要做到这一点，他会去管理面板通过输入对文本进行更改并保存。然后当然在主页中您会看到更新的文本。所以 home 组件实际上只能读取。问题是您将如何创建服务并使其可导入到使用它的组件中？

import { Component } from '@angular/core';
import { AngularFireDatabase, FirebaseObjectObservable } from 'angularfire2/database';

@Component({
selector: 'app-root',
template: `
  <h1>{{ item | async | json }}</h1>
  <input type="text" #newname placeholder="Name" />
  <input type="text" #newsize placeholder="Size" />
  <br />
  <button (click)="save(newname.value)">Set Name</button>
  <button (click)="update(newsize.value)">Update Size</button>
  <button (click)="delete()">Delete</button>
`,})
export class AppComponent {
  item: FirebaseObjectObservable<any>;

  constructor(db: AngularFireDatabase) {
    this.item = db.object('/item');
  }

  save(newName: string) {
    this.item.set({ name: newName });
  }

  update(newSize: string) {
    this.item.update({ size: newSize });
  }

  delete() {
    this.item.remove();
  }
}

正如您在代码中看到的那样，他们将其直接带入了主要组件。这会更好（在我不知情的情况下）成为可以注入的服务。我自己写了几次尝试这样做。只会得到许多类型的错误。有什么帮助吗？

4

1 回答 1

1

您可以创建一个由多个组件使用的服务。

确保将其包含在 NgModule 的提供程序部分。（所以它只被创建一次并且在整个应用程序中保持不变。

import { ItemService } from './services/item.service';

@NgModule({
  providers: [ItemService]
});

该服务可以从您现有的组件中复制。

import { AngularFireDatabase, FirebaseObjectObservable } from 'angularfire2/database';

@Injectable()
export class ItemService {
  public item: FirebaseObjectObservable<any>;

  constructor(
    private db: AngularFireDatabse
  ) {
    this.item = db.object('/item');
  }

  save(newName: string) {
    this.item.set({ name: newName });
  }

  update(newSize: string) {
    this.item.update({ size: newSize });
  }

  delete() {
    this.item.remove();
  }
}

然后你的组件瘦身并访问服务。

import { Component } from '@angular/core';
import { ItemService } from './services/item.service';

@Component({
  selector: 'app-root',
  template: `
    <h1>{{ item.service.item | async | json }}</h1>
    <input type="text" #newname placeholder="Name" />
    <input type="text" #newsize placeholder="Size" />
    <br />
    <button (click)="itemService.save(newname.value)">Set Name</button>
    <button (click)="itemService.update(newsize.value)">Update Size</button>
    <button (click)="itemService.delete()">Delete</button>
  `,})
  export class AppComponent {
    constructor(
      public itemService: ItemService
    ) {}
  }

此外，您不应在constructoron 组件中进行调用。查看生命周期钩子

于 2017-08-31T01:21:14.193 回答