Question

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

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

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

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

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

Answer 1

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

确保将其包含在NgModule的providers部分中。（因此它只会被创建一次并在整个应用程序中保持不变。

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
    ) {}
  }

此外，您不应在constructor组件内拨打电话。请查看Life Cycle Hooks

AngularFire2作为数据服务？

1 个答案: