Question

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

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

有人在Ng4上试过吗？我很乐意采取你所做的步骤来使用“mongodb-stitch”＆＃39;打包创建服务。

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绑定，您可以将 stitch 库声明为 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 intitial declarations上添加服务。

mongodb Atlas

mongodb-stitch vía NPM

Documentation mongoDB Stitch.

当然！

在Angular 4中使用mongodb-stitch库

3 个答案: