在Angular 4中使用mongodb-stitch库

Question

我一直在尝试在角度的MongoDB针迹服务，到目前为止，我能够使用该服务。然而，我可以连接到服务的唯一方法是在html页面上包含托管在AWS中的js库。

有一个mongodb-stitch npm包可用，mongodb教程上有关于如何使用它的示例页面。但这是一个纯JS库(不支持TS )，我尝试了几种方法(使用require、安装库的类型(不可用)、使用@types)都没有用。

有人在Ng4上试过吗？我很想知道您在使用'mongodb-stitch‘包创建服务时所做的步骤。

Answer 1

另一个答案建议实例化一个新的StitchClient实例，这是MongoDB在Official API Documentation中明确建议的-而且是有道理的，因为有一个工厂方法可以用于该目的。因此，(在安装mongodb-stitch之后)，以下代码将帮助您开始使用component.ts

import { Component, OnInit } from "@angular/core";
import { StitchClientFactory } from "mongodb-stitch";

let appId = 'authapp-****';

@Component({
selector: "app-mongo-auth",
templateUrl: "./mongo-auth.component.html",
styleUrls: ["./mongo-auth.component.css"]
})

export class MongoAuthComponent implements OnInit {

mClient;

ngOnInit() {
  this.mClient = StitchClientFactory.create(appId);
}

然后，您可以将其用于任何您想要的目的，例如实现与Google的登录

gLogin(){
this.mClient.then(stitchClient => {
  stitchClient.authenticate("google");
})

Answer 2

我不确定这个问题是否仍然相关，因为它是两个月前提出的，但不管怎样……

正如您所指出的，您可以使用npm install --save mongodb-stitch来安装该包，并且由于没有TS绑定，您可以将缝合库声明为any

例如：

    declare var stitch: any;

    export class MyService implements OnInit {
    db;

    client;

    ngOnInit() {
        this.client = new stitch.StitchClient('<check the stitch app page for proper value>');
        this.db = this.client.service('mongodb', 'mongodb-atlas').db('<the db name goes here>');
        this.client.login();
    }

    save() {
        this.db.collection('<collection name>').insertOne({key : 'value'}).then(() => console.log("All done"));
    }

  }

Answer 3

前面的答案是函数式的，但我想分享一个使用服务注入的示例。

service.ts

import { Injectable }    from '@angular/core';
import { Jsonp, URLSearchParams } from '@angular/http';

import { StitchClientFactory } from "mongodb-stitch";

import 'rxjs/add/operator/map';
@Injectable()
export class Service {  
  constructor(private jsonp: Jsonp) { }    
  client;
  connect(){
    this.client = new StitchClientFactory.create("App ID");  // Slitch apps > Clients > App ID
    this.client.then(stitchClient => stitchClient.login())
      .then((stitchClient) => console.log('logged in as: ' + stitchClient))
      .catch(e => console.log('error: ', e));
  }
  all() {
    this.connect();     
    return this.client.then(stitchClient => {
      let db = stitchClient.service('mongodb', 'mongodb-atlas').db("database Name"); // Slitch apps > mongodb-atlas > Name database.Collection
      let itemsCollection = db.collection('name collection'); // Slitch apps > mongodb-atlas > Name database.Collection        
      console.log(itemsCollection.find().execute());
      return itemsCollection.find().execute();                  
    })
     .then(result => {return result})
     .catch(e => console.log('error: ', e));          
   }
 }

在创建前一个文件之后，您必须创建一个模块来接收数据，因此：

module.ts

import { Component, OnInit, Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { StitchClientFactory } from "mongodb-stitch";
import { Service }          from 'service'; // previous code

declare var stitch: any;

@Component({  
  template: '
    <ul class="demo-list-icon mdl-list">
      <li class="mdl-list__item" *ngFor="let item of data | async">
         <span class="mdl-list__item-primary-content">
           <i class="material-icons mdl-list__item-icon">{{propiedad.nombre}}</i>            
         </span>
      </li>
   </ul>
  '  
 })
 export class MainComponent implements OnInit {  
   data: Observable<[]>;
   constructor(private Service: service) {
   }
   ngOnInit() {     
     this.propiedades = this.Service.all();
   }  
}

重要的是，你不能忘记在module.ts初始化声明中添加服务。

mongodb Atlas

mongodb-stitch vía NPM

Documentation mongoDB Stitch.

好的!