Question

我有一个用Angular 6编写的简单SPA，它使用MongoDB作为数据源，我需要组成一个页面，其中将显示几个组件以及来自不同集合的数据。

它具有模型列表和一组简单的路线。

我的模型样本：

'use strict'

const mongoose = require('mongoose');

const emailsSchema = new mongoose.Schema(
    {
        HREF: { type: String, required: true, default: "" },
        value: { type: String, required: true, default: "" }
    },
    { collection: 'emails' }
);

module.exports = mongoose.model('emails', emailsSchema);

我的routes.js：

'use strict'

const express = require('express');
const router = express.Router();

const models = [
    require('../models/emails')
]

/**
 * collection find wrapper
 * @param {Model} model mongodb model
 * @param {Response} res response object
 * @param {NextFunction} next next function handler
 */
const find = (model, res, next) => {
    model.find((err, entries) => {
        if (err)
            return next(err);

        res.json(entries);
    })
}

router.get('/', (req, res, next) => {
    res.json([]);
});

for (let model of models) {
    router.get(`/${model.modelName}`, (req, res, next) => {
        find(model, res, next);
    });
}

module.exports = router;

服务示例：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class CommonService {
  constructor(private http: HttpClient) { }

  getEmails = () => (this.http.get('db/emails'));
}

组件示例：

import { Component, OnInit, Input } from '@angular/core';
import { CommonService } from '../common.service';
import { Emails } from '../Models';

@Component({
  selector: 'app-compose',
  templateUrl: './compose.component.html',
  styleUrls: ['./compose.component.less']
})
export class ComposeComponent implements OnInit {
  emails: Emails[] = [];

  constructor(public service: CommonService) { }

  ngOnInit() {
    this.service.getEmails().subscribe((data) => this.emails = <Emails[]>data || []);
  }
}

这是问题：

是否可以继续使用ng serve并以某种方式实现此代码？

因为现在，当服务尝试从给定路径加载数据时，它会引发404错误，因为node.js在通过{{1}启动时并不了解我的路线和所有东西}命令。

还是我必须始终编译代码并手动启动节点服务器？

PS

我知道Angular中的路由，所有组件都有自己的路径时，我所有的组件都运行良好。

但是在这种情况下，我需要打开一个类似ng的路径，并显示一组不同的组件，每个组件都需要从预定义的MongoDB集合中读取数据。

在单个页面上显示来自MongoDB的数据的不同Angular 6组件

0 个答案: