Angular 8 教程

2025 年 3 月 18 日 | 17 分钟阅读

Angular 社区发布了其最新版本，即 Angular 8。如果您熟悉以前的 Angular 版本，这并不会很困难。您可以轻松将 Angular CLI 升级到版本 8。

什么是 Angular 8？

Angular 8 是一个基于 TypeScript 的客户端框架，用于创建动态 Web 应用程序。它与以前的版本非常相似，但有一些扩展功能。

注意：动态 Web 应用程序就是动态网站，例如 www.gmail.com、www.yahoo.com 等，它们倾向于根据 3 个参数更改数据/信息

时时刻刻（例如，新闻更新 Web 应用程序）
地点到地点（例如，天气预报 Web 应用程序）
用户到用户（例如，Gmail、Facebook 类型的应用程序）

您可以看到如何将 Angular CLI 升级到版本 8。点击此处

Angular 8 的新功能

Angular 社区发布了其最新版本 Angular 8，其中包含一系列令人印象深刻的更改和改进，包括备受期待的 Ivy 编译器作为可选功能。

以下是 Angular 8 最突出的功能

Angular 8 支持 TypeScript 3.4
Angular 8 支持 Web Workers
Angular 8 的新编译器是 Ivy 渲染引擎
Angular 8 为懒加载模块提供动态导入。
ngUpgrade 的改进

TypeScript 3.4

Angular 8 支持 TypeScript 3.4，并且运行您的 Angular 8 项目需要它。因此，您必须将 TypeScript 版本升级到 3.4。

Web workers 类

JavaScript 是单线程的，因此更关键的任务（如数据调用）异步发生是很常见的。Web Workers 允许您在后台线程中运行 CPU 密集型计算，从而释放主线程来更新用户界面。

如果您的应用程序在处理数据时无响应，Web worker 也会有所帮助。

如果您想将此类计算外包到后台，我们必须首先使用 Angular CLI 创建 web worker。

关于 Ivy 和 Bazel 的更多信息

Ivy 是新的渲染引擎，Bazel 是新的构建系统。两者都已准备好与 Angular 8 正式使用。这两个的预览版应该很快就会发布。Ivy 是 Angular 的新编译器/运行时，Angular 8 是第一个提供正式选择加入 Ivy 的版本。

Ivy 预计将在 Angular 9 版本中成为默认渲染引擎。

Bazel 提供了 Angular 8 的最新功能之一，即能够更快地构建您的 CLI 应用程序。

Bazel 的主要优点是

增量构建和测试。
它提供了使用相同工具构建后端和前端的机会。
它有可能在构建场上进行远程构建和缓存。

懒加载模块的动态导入

Angular 8 允许您对懒加载模块使用标准动态导入语法，而不是自定义字符串。

这意味着懒加载导入看起来像这样

将看起来像这样

{ path: `/student`, loadChildren: () => import(`./student/student.module`).then(s => s.StudentModule) }

改进的 Angular CLI 工作流

Angular CLI 正在不断改进。现在，ng build、ng test 和 ng run 已由第三方库和工具提供支持。例如，AngularFire 已经利用这些新功能，提供了 deploy 命令。

Angular 8 教程的先决条件

您必须已安装 Node.js 版本 > 10。NPM 也将更新，因为它将默认使用。这里，我使用的是 Node 版本 12.4.0
您必须在系统上安装了 MongoDB。您可以查看如何安装 MongoDB。点击此处...

Angular 8 教程的工作流

在这里，我们将创建两个独立的项目

一个用于前端 (Angular)，一个用于后端 (Node.js | Express | MongoDB)。我们还将创建一个后端 API，供前端使用。

在这里，我们使用以下技术

Node: 12.4.0
Angular CLI: 8.0.2
NPM: v12.4.0
MongoDB shell 版本 v4.0.10
MongoDB 版本 v4.0.10
Windows 10

注意：您可以使用以下命令检查您的 node、angular、npm 和 mongoDB 版本

要检查 Node 和 Angular CLI 版本，请使用 ng --version 命令。
要检查 npm 版本，请使用 node -v 命令。
要检查 MongoDB 版本，请使用 mongod --version 命令。
要检查 MongoDB shell 版本，请使用 mongo --version 命令。

创建 Angular 8 项目

让我们使用以下命令创建一个 Angular 8 项目

这里，angular8project 是项目名称。

安装 Bootstrap 4 CSS 框架

使用以下命令在您的项目中安装 bootstrap。

现在，将以下代码添加到 angular.json 文件中。

"styles": [
   "src/styles.css",
   "./node_modules/bootstrap/dist/css/bootstrap.min.css"
 ],

上述 CSS 用于我们可以在任何文件中使用 bootstrap 类。

使用以下命令启动 Angular 开发服务器。

服务器在 https://:4200/ 启动

您可以看到输出。这是最初的 Angular 主屏幕。

项目描述

在这个项目中，我们将方便用户

在表单中输入他们的产品名称、产品描述和产品价格并提交表单。
根据值验证表单。如果值不正确，则会在前端进行验证，并且表单不会提交。
如果所有值都正确，将表单发送到 Node.js 后端 API。
将值存储在 MongoDB 数据库中。
在前端显示数据。
还方便用户编辑和删除数据。
在 MongoD CLI 上显示数据。
在 MongoDB Compass Community（MongoDB 数据库的 GUI。）上显示数据。

生成 Angular 组件

我们将进行 CRUD 操作来创建、读取和更新数据。因此，我们将创建三个组件。

使用以下命令生成 3 个 Angular 组件

ng g c product-add --skipTests=true
ng g c product-get --skipTests=true
ng g c product-edit --skipTests=true

注意："spec" 命令在 Angular 8 中已弃用。您必须改用 "skipTests"。

所有上述 3 个组件都已自动添加到 app.module.ts 文件中。现在，我们必须在 app-routing.module.ts 文件中配置 angular 组件的路由。

您可以在项目文件中的 src >> app 文件夹中检查 app-routing.module.ts 文件。它是在我们安装 angular 应用程序时创建的，我们允许 angular cli 为我们生成路由文件。

现在，将以下代码写入 app-routing.module.ts 文件中

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ProductAddComponent } from './product-add/product-add.component';
import { ProductEditComponent } from './product-edit/product-edit.component';
import { ProductGetComponent } from './product-get/product-get.component';
const routes: Routes = [
  {
    path: 'product/create',
    component: ProductAddComponent
  },
  {
    path: 'edit/:id',
    component: ProductEditComponent
  },
  {
    path: 'products',
    component: ProductGetComponent
  }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

现在，您可以在 app.component.html 文件中看到指令。此指令帮助我们根据路由 URI 渲染不同的组件。

创建 Angular 导航

将以下代码写入 app.component.html 文件中。

<nav class="navbar navbar-expand-sm bg-light">
  <div class="container-fluid">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a routerLink="product/create" class="nav-link" routerLinkActive="active">
          Create Product
        </a>
      </li>
      <li class="nav-item">
        <a routerLink="products" class="nav-link" routerLinkActive="active">
          Products
        </a>
      </li> 
    </ul>
  </div>
</nav>
<div class="container">
  <router-outlet></router-outlet>
</div>

安装 Angular 路由进度指示器

键入以下命令安装 ng2-slim-loading-bar 库。

如果您现在安装了第三方包，那么它与 Angular 8 不兼容。为了解决 Angular 8 和第三方包之间的问题，您必须安装以下库。

现在，在 app.module.ts 文件中导入 SlimLoadingBarModule。

import { SlimLoadingBarModule } from 'ng2-slim-loading-bar';
imports: [
    ...
    SlimLoadingBarModule
],

现在，将库随附的样式包含在 src >> styles.css 文件中。

添加路由事件

Angular RouterModule 为我们提供了以下事件模块。

NavigationStart
NavigationEnd
NavigationError
NavigationCancel
路由器
事件

现在，将以下代码写入 app.component.ts 文件中。

import { Component } from '@angular/core';
import {SlimLoadingBarService} from 'ng2-slim-loading-bar';
import { NavigationCancel,
 Event,
        NavigationEnd,
        NavigationError,
        NavigationStart,
        Router } from '@angular/router';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular8tutorial';
  constructor(private loadingBar: SlimLoadingBarService, private router: Router) {
    this.router.events.subscribe((event: Event) => {
      this.navigationInterceptor(event);
    });
  }
  private navigationInterceptor(event: Event): void {
    if (event instanceof NavigationStart) {
      this.loadingBar.start();
    }
    if (event instanceof NavigationEnd) {
      this.loadingBar.complete();
    }
    if (event instanceof NavigationCancel) {
      this.loadingBar.stop();
    }
    if (event instanceof NavigationError) {
      this.loadingBar.stop();
    }
  }
}

在上面的代码中，我们已在 Angular 应用程序中指定，当用户从一个组件导航到另一个组件时，它将显示进度结果。

当用户点击其他路由时，Angular 进度指示器开始显示，当导航完成时，它将停止显示。因此，它对用户来说是一种用户体验。

上面的代码拦截路由事件并将加载条组件添加到每个路由，这样我们就可以在每次更改路由时看到路由指示。

我们必须在 app.component.html 文件的顶部添加 ng2-slim-loading-bar 指令。

<!-- app.component.html -->
<ng2-slim-loading-bar color="blue"></ng2-slim-loading-bar>
<nav class="navbar navbar-expand-sm bg-light">
  <div class="container-fluid">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a routerLink="product/create" class="nav-link" routerLinkActive="active">
          Create Product
        </a>
      </li>
      <li class="nav-item">
        <a routerLink="products" class="nav-link" routerLinkActive="active">
          Products
        </a>
      </li> 
    </ul>
  </div>
</nav>
<div class="container">
  <router-outlet></router-outlet>
</div>

添加 Bootstrap 表单

将以下 Bootstrap 4 表单添加到 product-add.component.html 文件中。

<div class="card">
  <div class="card-body">
    <form>
      <div class="form-group">
        <label class="col-md-4">Product Name</label>
        <input type="text" class="form-control" />
      </div>
      <div class="form-group">
        <label class="col-md-4">Product Description </label>
        <textarea class="form-control" rows = 7 cols = "5"></textarea>
      </div>
      <div class="form-group">
        <label class="col-md-4">Product Price</label>
        <input type="text" class="form-control" />
      </div>
      <div class="form-group">
        <button type="submit" class="btn btn-primary">Create Product</button>
      </div>
    </form>
  </div>
</div>

打开本地主机浏览器并查看输出。它将看起来像下图所示。

添加 Angular 8 表单验证

在这里，我们使用响应式表单模块来为我们的表单添加验证。在 app.module.ts 文件中导入 ReactiveFormsModule。

import { ReactiveFormsModule } from '@angular/forms';
imports: [
    ...
    ReactiveFormsModule
],

在这里，您需要注意，它不是模板驱动表单，因此您需要在 app.component.ts 文件中进行更改。

在这里，我们必须从 @angular/forms 导入 FormGroup、FormBuilder、Validators 模块，并创建一个构造函数并实例化 FormBuilder。

因此，将以下代码写入 product-add.component.ts 文件中。

import { Component, OnInit } from '@angular/core';
import { FormGroup,  FormBuilder,  Validators } from '@angular/forms';
@Component({
  selector: 'app-product-add',
  templateUrl: './product-add.component.html',
  styleUrls: ['./product-add.component.css']
})
export class ProductAddComponent implements OnInit {
  angForm: FormGroup;
  constructor(private fb: FormBuilder) {
    this.createForm();
  }
  createForm() {
    this.angForm = this.fb.group({
      ProductName: ['', Validators.required ],
      ProductDescription: ['', Validators.required ],
      ProductPrice: ['', Validators.required ]
    });
  }
  ngOnInit() {
  }
}

在这里，我们使用表单生成器来处理所有验证。现在，在该构造函数中，我们必须使用验证规则创建一个表单。在我们的示例中，有三个字段。如果输入文本为空，则会给出错误，并且我们需要显示该错误。

现在，将以下代码写入 product-add.component.html 文件中。

<div class="card">
  <div class="card-body">
    <form [formGroup]="angForm" novalidate>
      <div class="form-group">
        <label class="col-md-4">Product Name</label>
        <input type="text" class="form-control" 
          formControlName="ProductName" 
          #ProductName />
      </div>
      <div *ngIf="angForm.controls['ProductName'].invalid && (angForm.controls['ProductName'].dirty || angForm.controls['ProductName'].touched)" class="alert alert-danger">
        <div *ngIf="angForm.controls['ProductName'].errors.required">
          Product Name is required.
        </div>
      </div>
      <div class="form-group">
        <label class="col-md-4">Product Description </label>
        <textarea class="form-control" rows = 7 cols = "5"
        formControlName="ProductDescription" 
        #ProductDescription></textarea>
      </div>
      <div *ngIf="angForm.controls['ProductDescription'].invalid && (angForm.controls['ProductDescription'].dirty || angForm.controls['ProductDescription'].touched)" class="alert alert-danger">
        <div *ngIf="angForm.controls['ProductDescription'].errors.required">
          Product Description is required.
        </div>
      </div>
      <div class="form-group">
        <label class="col-md-4">Product Price</label>
        <input type="text" class="form-control" 
          formControlName="ProductPrice" 
          #ProductPrice
        />
      </div>
      <div *ngIf="angForm.controls['ProductPrice'].invalid && (angForm.controls['ProductPrice'].dirty || angForm.controls['ProductPrice'].touched)" class="alert alert-danger">
        <div *ngIf="angForm.controls['ProductPrice'].errors.required">
          Product Price is required.
        </div>
      </div>
      <div class="form-group">
        <button type="submit" class="btn btn-primary"
        [disabled]="angForm.pristine || angForm.invalid" >
          Create Product
        </button>
      </div>
    </form>
  </div>
</div>

现在，您可以检查表单是否已验证。

配置 HttpClientModule

前端应用程序总是需要 HTTP 协议来与后端服务通信。现代浏览器支持两种不同的 API 来发出 HTTP 请求：javaHttpRequest 接口和 fetch() API。

在 app.module.ts 文件中导入 HttpClientModule。

// app.module.ts
import { HttpClientModule } from '@angular/common/http';
imports: [
   ...
    HttpClientModule
 ],

创建模型文件

在 src >> app 文件夹中，创建一个名为 Product.ts 的文件并添加以下代码。

export default class Product {
  ProductName: string;
  ProductDescription: string;
  ProductPrice: number;
}

创建 Angular 服务文件

键入以下命令生成服务文件。

创建后，它将看起来像这样

import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root'
})
export class ProductsService {

  constructor() { }
}

现在，将 products.service.ts 文件导入到 app.module.ts 文件中。

import { ProductsService } from './products.service';
providers: [ ProductsService ],

将数据提交到节点服务器

现在，我们必须编写代码，将 HTTP POST 请求和数据发送到 Node.js 服务器，然后将数据保存到 MongoDB 数据库中。

将以下代码写入 products.service.ts 文件中。

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
  providedIn: 'root'
})
export class ProductsService {
  uri = 'https://:4000/products';
  constructor(private http: HttpClient) { }
  addProduct(ProductName, ProductDescription, ProductPrice) {
    const obj = {
      ProductName,
      ProductDescription,
      ProductPrice
    };
    console.log(obj);
    this.http.post(`${this.uri}/add`, obj)
        .subscribe(res => console.log('Done'));
  }
}

注意：这里，我们定义了我们的后端 API URL，但我们还没有创建任何后端。让我们创建它。

现在，我们必须将 click 事件添加到“添加产品”按钮。因此，将以下代码添加到 product-add.component.html 文件中。

<div class="form-group">
        <button (click) = "addProduct(ProductName.value, ProductDescription.value, ProductPrice.value)" type="submit" class="btn btn-primary"
        [disabled]="angForm.pristine || angForm.invalid" >
          Create Product
        </button>
</div>

现在，将 addProduct() 函数添加到 product-add.component.ts 文件中。因此，将以下代码写入 product-add.component.ts 文件中。

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { ProductsService } from '../products.service';
@Component({
  selector: 'app-product-add',
  templateUrl: './product-add.component.html',
  styleUrls: ['./product-add.component.css']
})
export class ProductAddComponent implements OnInit {

  angForm: FormGroup;
  constructor(private fb: FormBuilder, private ps: ProductsService) {
    this.createForm();
  }
  createForm() {
    this.angForm = this.fb.group({
      ProductName: ['', Validators.required ],
      ProductDescription: ['', Validators.required ],
      ProductPrice: ['', Validators.required ]
    });
  }
  addProduct(ProductName, ProductDescription, ProductPrice) {
    this.ps.addProduct(ProductName, ProductDescription, ProductPrice);
  }
  ngOnInit() {
  }
}

创建 Node.js 后端 API

在 Angular 根文件夹中创建一个名为 api 的文件夹，然后进入该文件夹。这将是一个与您的 Angular 项目完全分离的项目。因此，它的 node_modules 文件夹与 Angular 项目不同。

在 api 文件夹中打开终端并键入以下命令。它将使用 NPM 生成 package.json 文件。

安装以下节点特定模块。

安装 nodemon server，它将方便您每次进行更改时无需启动节点服务器。它会自动重新启动 node.js 服务器。

现在，在 api 文件夹中，创建一个名为 server.js 的文件。将以下代码添加到 server.js 文件中。

const express = require('express'),
    path = require('path'),
    bodyParser = require('body-parser'),
    cors = require('cors'),
    mongoose = require('mongoose');
    const app = express();
    let port = process.env.PORT || 4000;
    const server = app.listen(function(){
        console.log('Listening on port ' + port);
    });

现在，将 MongoDB 数据库与我们的 node express 应用程序连接起来。

如果您尚未安装 MongoDB 数据库，请安装它，然后使用以下命令启动 mongodb 服务器。

如何安装 MongoDB 点击此处...

现在，我们已连接到数据库。

在 api 根项目文件夹中创建一个名为 DB.js 的文件。将以下代码写入 DB.js 文件中。

module.exports = {
  DB: 'mongodb://:27017/ng8crud'
};

将此 DB.js 文件导入到我们的 server.js 文件中，并使用 mongoose 库设置与 MongoDB 的数据库连接。将以下代码写入 server.js 文件以将我们的 MongoDB 应用程序连接到 Node.js 服务器。

const express = require('express'),
    path = require('path'),
    bodyParser = require('body-parser'),
    cors = require('cors'),
    mongoose = require('mongoose'),
    config = require('./DB');
    mongoose.Promise = global.Promise;
    mongoose.connect(config.DB, { useNewUrlParser: true }).then(
      () => {console.log('Database is connected') },
      err => { console.log('Can not connect to the database'+ err)}
    );
    const app = express();
    app.use(bodyParser.json());
    app.use(cors());
    const port = process.env.PORT || 4000;
    const server = app.listen(port, function(){
     console.log('Listening on port ' + port);
    });

保存此 server.js 文件，然后转到终端并使用以下命令启动节点服务器。

所以，现在有三个服务器正在运行

Angular 开发服务器
Node.js 服务器
MongoDB 服务器

Angular 服务器

Node.js 服务器

MongoDB 服务器

为您的应用程序创建模型和路由

现在，我们必须在 api 根文件夹中创建两个名为 routes 和 models 的文件夹。

让我们在 models 文件夹中创建一个名为 Product.js 的模型，其中包含以下代码。

const mongoose = require('mongoose');
const Schema = mongoose.Schema;
// Define collection and schema for Product
let Product = new Schema({
  ProductName: {
    type: String
  },
  ProductDescription: {
    type: String
  },
  ProductPrice: {
    type: Number
  }
},{
    collection: 'Product'
});
module.exports = mongoose.model('Product', Product);

在这里，我们定义了产品集合的 schema。我们有三个字段，名为 ProductName、ProductDescription、ProductPrice。

在 routes 文件夹中，创建一个名为 product.route.js 的文件。

将以下 CRUD 代码写入 product.route.js 文件中。

const express = require('express');
const app = express();
const productRoutes = express.Router();
// Require Product model in our routes module
let Product = require('../models/Product');
// Defined store route
productRoutes.route('/add').post(function (req, res) {
  let product = new Product(req.body);
  product.save()
    .then(product => {
      res.status(200).json({'Product': 'Product has been added successfully'});
    })
    .catch(err => {
    res.status(400).send("unable to save to database");
    });
});
// Defined get data(index or listing) route
productRoutes.route('/').get(function (req, res) {
  Product.find(function (err, products){
    if(err){
      console.log(err);
    }
    else {
      res.json(products);
    }
  });
});
// Defined edit route
productRoutes.route('/edit/:id').get(function (req, res) {
  let id = req.params.id;
  Product.findById(id, function (err, product){
      res.json(product);
  });
});
//  Defined update route
productRoutes.route('/update/:id').post(function (req, res) {
  Product.findById(req.params.id, function(err, product) {
    if (!product)
      res.status(404).send("Record not found");
    else {
      product.ProductName = req.body.ProductName;
      product.ProductDescription = req.body.ProductDescription;
      product.ProductPrice = req.body.ProductPrice;
 product.save().then(product => {
          res.json('Update complete');
      })
      .catch(err => {
            res.status(400).send("unable to update the database");
      });
    }
  });
});
// Defined delete | remove | destroy route
productRoutes.route('/delete/:id').get(function (req, res) {
    Product.findByIdAndRemove({_id: req.params.id}, function(err, product){
        if(err) res.json(err);
        else res.json('Successfully removed');
    });
});
module.exports = productRoutes;

现在，我们已经在路由文件上设置了所有 CRUD 操作；我们需要在 server.js 文件中导入它。

因此，使用以下代码更新 server.js 文件

const express = require('express'),
    path = require('path'),
    bodyParser = require('body-parser'),
    cors = require('cors'),
    mongoose = require('mongoose'),
    config = require('./DB');
   const productRoute = require('./routes/product.route');
    mongoose.Promise = global.Promise;
    mongoose.connect(config.DB, { useNewUrlParser: true }).then(
      () => {console.log('Database is connected') },
      err => { console.log('Can not connect to the database'+ err)}
    );
    const app = express();
    app.use(bodyParser.json());
    app.use(cors());
    app.use('/products', productRoute);
    const port = process.env.PORT || 4000;
    const server = app.listen(port, function(){
     console.log('Listening on port ' + port);
    });

现在，如果尚未启动，请启动 node.js 服务器。如果它已经启动，那么让我们检查数据存储功能。

测试数据存储功能

现在，我们将输入一些数据来测试它是否正在存储。

首先，在第 4 个标签页中打开 mongo shell，因为其他三个标签页目前都被占用了。

使用以下命令打开 mongo shell

在这里，您可以使用

show dbs 命令查看数据库
使用 database_name 命令使用数据库，并使用 db.collection_name.find() 查找查询。

注意：这里，我们使用了 db.collection_name.find().pretty() 命令仅美化结果。

查看数据库中存储项的替代方法

如果您喜欢 GUI，也可以使用 MongoDB Compass Community 查看数据库和条目。

在前端浏览器上显示数据

如果您想在前端浏览器上显示数据，请在 product-get.component.html 文件中写入以下代码。

<table class="table table-hover">
  <thead>
  <tr>
      <td>Product Name</td>
      <td>Product Description</td>
      <td>Product Price</td>
      <td colspan="2">Actions</td>
  </tr>
  </thead>
  <tbody>
      <tr *ngFor="let product of products">
          <td>{{ product.ProductName }}</td>
          <td>{{ product.ProductDescription }}</td>
          <td>{{ product.ProductPrice }}</td>
          <td><a [routerLink]="['/edit', product._id]" class="btn btn-primary">Edit</a></td>
          <td><a [routerLink]="" class="btn btn-danger">Delete</a></td>
      </tr>
  </tbody>
</table>

现在，我们必须在 products.service.ts 文件中编写一个函数，该函数从 MongoDB 数据库中获取产品数据并在 Angular 应用程序中显示。

getProducts() {
    return this
           .http
           .get(`${this.uri}`);
  }

将此 products.service.ts 文件和 Product.ts 文件包含在 product-get.component.ts 文件中。

将以下代码写入 product-get.component.ts 文件中。

import { Component, OnInit } from '@angular/core';
import Product from '../Product';
import { ProductsService } from '../products.service';
@Component({
  selector: 'app-product-get',
  templateUrl: './product-get.component.html',
  styleUrls: ['./product-get.component.css']
})
export class ProductGetComponent implements OnInit {
  products: Product[];
  constructor(private ps: ProductsService) { }
  ngOnInit() {
    this.ps
      .getProducts()
      .subscribe((data: Product[]) => {
        this.products = data;
    });
  }
}

现在，保存文件，转到浏览器并切换到此 URL：https://:4200/products。您将看到以下结果。

现在，您已成功从数据库中获取数据并显示到浏览器。

编辑和更新数据

首先，我们需要从 MongoDB 数据库中获取 _id 对应的数据，然后将该数据显示在 product-edit.component.html 文件中。

将以下代码写入 product-edit.component.ts 文件中。

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { ProductsService } from '../products.service';
@Component({
  selector: 'app-product-edit',
  templateUrl: './product-edit.component.html',
  styleUrls: ['./product-edit.component.css']
})
export class ProductEditComponent implements OnInit {
  angForm: FormGroup;
 product: any = {};
  constructor(private route: ActivatedRoute, private router: Router, private ps: ProductsService, private fb: FormBuilder) {
      this.createForm();
 }
  createForm() {
    this.angForm = this.fb.group({
      ProductName: ['', Validators.required ],
      ProductDescription: ['', Validators.required ],
      ProductPrice: ['', Validators.required ]
    });
  }
  ngOnInit() {
    this.route.params.subscribe(params => {
        this.ps.editProduct(params['id']).subscribe(res => {
          this.product = res;
      });
    });
  }
}

在这里，当 product-edit component.ts 渲染时，它将调用 ngOnInit 方法并向节点服务器发送 HTTP 请求，并从 _id 获取数据以显示在 product-edit component.html 文件中。

现在，在 products.service.ts 文件中，我们需要编写 editProduct 函数来发送 HTTP 请求。

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
  providedIn: 'root'
})
export class ProductsService {
  uri = 'https://:4000/products';
  constructor(private http: HttpClient) { }
  addProduct(ProductName, ProductDescription, ProductPrice) {
    console.log(ProductName, ProductDescription, ProductPrice);
    const obj = {
      ProductName,
      ProductDescription,
      ProductPrice
    };
    this.http.post(`${this.uri}/add`, obj)
        .subscribe(res => console.log('Done'));
  }
  getProducts() {
    return this
           .http
           .get(`${this.uri}`);
  }
  editProduct(id) {
    return this
            .http
            .get(`${this.uri}/edit/${id}`);
    }
}

最后，将表单写入 product-edit.component.html 文件中。

<!-- product-edit.component.html -->
<div class="card">
  <div class="card-body">
    <form [formGroup]="angForm" novalidate>
      <div class="form-group">
        <label class="col-md-4">Product Name</label>
        <input type="text" class="form-control" 
          formControlName="ProductName" 
          #ProductName 
          [(ngModel)] = "product.ProductName"/>
      </div>
      <div *ngIf="angForm.controls['ProductName'].invalid && (angForm.controls['ProductName'].dirty || angForm.controls['ProductName'].touched)" class="alert alert-danger">
        <div *ngIf="angForm.controls['ProductName'].errors.required">
          Product Name is required.
        </div>
      </div>
      <div class="form-group">
        <label class="col-md-4">Product Description </label>
        <textarea class="form-control" rows = 7 cols = "5"
        formControlName="ProductDescription" 
        #ProductDescription [(ngModel)] = "product.ProductDescription"></textarea>
      </div>
      <div *ngIf="angForm.controls['ProductDescription'].invalid && (angForm.controls['ProductDescription'].dirty || angForm.controls['ProductDescription'].touched)" class="alert alert-danger">
        <div *ngIf="angForm.controls['ProductDescription'].errors.required">
          Product Description is required.
        </div>
      </div>
      <div class="form-group">
        <label class="col-md-4">Product Price</label>
        <input type="text" class="form-control" 
          formControlName="ProductPrice" 
          #ProductPrice
          [(ngModel)] = "product.ProductPrice"
        />
      </div>
      <div *ngIf="angForm.controls['ProductPrice'].invalid && (angForm.controls['ProductPrice'].dirty || angForm.controls['ProductPrice'].touched)" class="alert alert-danger">
        <div *ngIf="angForm.controls['ProductPrice'].errors.required">
          Product Price is required.
        </div>
      </div>
      <div class="form-group">
        <button (click) = "updateProduct(ProductName.value, ProductDescription.value, ProductPrice.value)" type="submit" class="btn btn-primary"
        [disabled]="angForm.invalid" >
          Update Product
        </button>
      </div>
    </form>
  </div>
</div>

现在，使用以下代码更新 products.service.ts 文件中的数据，我们需要编写更新数据的函数。

updateProduct(ProductName, ProductDescription, ProductPrice, id) {
    const obj = {
      ProductName,
      ProductDescription,
      ProductPrice
    };
    this
      .http
      .post(`${this.uri}/update/${id}`, obj)
      .subscribe(res => console.log('Done'));
}

现在，在 product-edit.component.ts 文件中写入 updateProduct() 函数。

updateProduct(ProductName, ProductDescription, ProductPrice, id) {
    this.route.params.subscribe(params => {
      this.ps.updateProduct(ProductName, ProductDescription, ProductPrice, params.id);
      this.router.navigate(['products']);
    });
  }

让我们检查编辑功能。在上面的读取操作中，我们看到有两个重复的 Radio 条目，如下所示

现在，我们将第二个 Radio 条目更改为 Stereo。

删除数据

这是 CRUD 操作的最后一步。我们目前已成功部署 CREATE、READ 和 UPDATE 操作。

因此，为了使 DELETE 操作成为可能，我们必须在 product-get.component.html 文件中的删除按钮上定义一个点击事件。

<tbody>
      <tr *ngFor="let product of products">
          <td>{{ product.ProductName }}</td>
          <td>{{ product.ProductDescription }}</td>
          <td>{{ product.ProductPrice }}</td>
          <td><a [routerLink]="['/edit', product._id]" class="btn btn-primary">Edit</a></td>
          <td><a (click) = "deleteProduct(product._id)" class="btn btn-danger">Delete</a>
      </tr>
  </tbody>

现在，我们必须在 product-get.component.ts 文件中编写 deleteProduct() 函数。

deleteProduct(id) {
    this.ps.deleteProduct(id).subscribe(res => {
      this.products.splice(id, 1);
    });
}

最后，在 product.service.ts 文件中创建 deleteProduct() 函数。

deleteProduct(id) {
    return this
              .http
              .get(`${this.uri}/delete/${id}`);
  }

DELETE 操作现已完成。让我们看看它是如何工作的。在这里，我们删除了我们首先编辑的第二个项目 Stereo。

您可以看到 Stereo 已被删除。您也可以在 MongoDB Compass Community GUI 上验证它。

Angular 8 教程索引

Angular 8 教程

Angular 7 指令

Angular 8 数据绑定

Angular 8 表单

Angular 8 表单

Angular 其他

Angular vs React

Angular + Spring

面试题

下一主题如何将 Angular 旧版本升级到 Angular 8

我们提供所有技术（如 Java 教程、Android、Java 框架）的教程和面试问题

联系信息

G-13, 2nd Floor, Sec-3, Noida, UP, 201301, India

hr@tpointtech.com

+91-9599086977

关注我们

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Angular 8 教程

Angular 其他

Angular + Spring

Angular 8 教程

什么是 Angular 8？

注意：动态 Web 应用程序就是动态网站，例如 www.gmail.com、www.yahoo.com 等，它们倾向于根据 3 个参数更改数据/信息

Angular 8 的新功能

TypeScript 3.4

Web workers 类

关于 Ivy 和 Bazel 的更多信息

懒加载模块的动态导入

改进的 Angular CLI 工作流

Angular 8 教程的先决条件

Angular 8 教程的工作流

注意：您可以使用以下命令检查您的 node、angular、npm 和 mongoDB 版本

创建 Angular 8 项目

安装 Bootstrap 4 CSS 框架

项目描述

生成 Angular 组件

注意："spec" 命令在 Angular 8 中已弃用。您必须改用 "skipTests"。

创建 Angular 导航

安装 Angular 路由进度指示器

添加路由事件

添加 Bootstrap 表单

添加 Angular 8 表单验证

配置 HttpClientModule

创建模型文件

创建 Angular 服务文件

将数据提交到节点服务器

注意：这里，我们定义了我们的后端 API URL，但我们还没有创建任何后端。让我们创建它。

创建 Node.js 后端 API

为您的应用程序创建模型和路由

测试数据存储功能

注意：这里，我们使用了 db.collection_name.find().pretty() 命令仅美化结果。

查看数据库中存储项的替代方法

在前端浏览器上显示数据

编辑和更新数据

删除数据

Angular 8 教程索引

相关帖子

Angular 8 架构

双向数据绑定

Angular 8 数据绑定

Angular 8 安装

Angular 8 表单

Angular 8 指令

Angular 8 属性绑定

Angular 应用加载

Angular 8 事件绑定

Angular 8 特性

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器