如何在angular中捕获html内容，然后将其保存到DB中并加载？

<textarea [(ngModel)]="htmlContent"></textarea>
<button (click)="saveHtmlContent()">保存</button>

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

@Component({
  selector: 'app-html-content',
  templateUrl: './html-content.component.html',
  styleUrls: ['./html-content.component.css']
})
export class HtmlContentComponent {
  htmlContent: string;

  constructor(private http: HttpClient) {}

  saveHtmlContent() {
    // 将HTML内容发送到后端保存到数据库
    this.http.post('/api/save-html-content', { content: this.htmlContent })
      .subscribe(() => {
        console.log('保存成功！');
      }, (error) => {
        console.error('保存失败：', error);
      });
  }
}

app.post('/api/save-html-content', (req, res) => {
  const content = req.body.content;

  // 将HTML内容保存到数据库中
  // 例如使用MongoDB保存
  const htmlCollection = db.collection('html');
  htmlCollection.insertOne({ content }, (error, result) => {
    if (error) {
      console.error('保存失败：', error);
      res.status(500).send('保存失败');
    } else {
      res.send('保存成功');
    }
  });
});

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

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

  getHtmlContent() {
    return this.http.get('/api/get-html-content');
  }
}

export class HtmlContentComponent implements OnInit {
  htmlContent: string;

  constructor(private htmlContentService: HtmlContentService) {}

  ngOnInit() {
    this.htmlContentService.getHtmlContent()
      .subscribe((response: any) => {
        this.htmlContent = response.content;
      }, (error) => {
        console.error('获取内容失败：', error);
      });
  }
}