Angular:如何从后端加载 svg 文件并将其内容用作模板？

Question

我需要一种从 Spring Boot 后端加载 SVG 日期并将其内容用作 Angular 模板的方法。

我的请求目前看起来是这样的:

   getSVG (): Observable <any> {
     return this.http.get(`${environment.apiUrl}/path/to/svg/svg.svg`, {headers: new HttpHeaders ({'Content-Type': 'image/svg+xml'})});
   }

在我的组件中它是这样调用的:

   ngOnInit () {
     this.myService.getSVG().subscribe((data) => {
       console.log('data', data);
     });
   }

请求通过，以便我在网络选项卡中获得 svg 文件。但是在浏览器控制台中，我收到以下错误消息:

backend returned code 200, body was: [object Object]           main.js:1388:25
    intercept http://localhost:8425/main.js:1388
    error http://localhost:8425/vendor.js:223317
    onLoad http://localhost:8425/vendor.js:41005
    invokeTask http://localhost:8425/polyfills.js:663
    onInvokeTask http://localhost:8425/vendor.js:76954
    invokeTask http://localhost:8425/polyfills.js:662
    runTask http://localhost:8425/polyfills.js:431
    invokeTask http://localhost:8425/polyfills.js:744
    invokeTask http://localhost:8425/polyfills.js:1885
    globalZoneAwareCallback http://localhost:8425/polyfills.js:1922


ERROR OK                                                       vendor.js:47101:33
    defaultErrorLogger http://localhost:8425/vendor.js:47101
    handleError http://localhost:8425/vendor.js:47153
    next http://localhost:8425/vendor.js:77725
    schedulerFn http://localhost:8425/vendor.js:73301
    __tryOrUnsub http://localhost:8425/vendor.js:219977
    next http://localhost:8425/vendor.js:219916
    _next http://localhost:8425/vendor.js:219866
    next http://localhost:8425/vendor.js:219843
    next http://localhost:8425/vendor.js:219629
    emit http://localhost:8425/vendor.js:73263
    onHandleError http://localhost:8425/vendor.js:77012
    invoke http://localhost:8425/polyfills.js:628
    run http://localhost:8425/polyfills.js:387
    runOutsideAngular http://localhost:8425/vendor.js:76893
    onHandleError http://localhost:8425/vendor.js:77009
    handleError http://localhost:8425/polyfills.js:632
    runTask http://localhost:8425/polyfills.js:434
    invokeTask http://localhost:8425/polyfills.js:744
    invoke http://localhost:8425/polyfills.js:733
    timer http://localhost:8425/polyfills.js:2816

我想提取 SVG 的内容并在我的模板中使用它，例如:

我的.component.svg

<svg width="400" height="110">
  <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
    ...
</svg>

Answer 1

从网络获取模板后，无法在浏览器中定义组件。 Angular 组件与模板一起编译，模板应该在编译时存在。如果你真的想插入动态 svg 内容，你可以在从 http 请求中获取 svg 文件后使用'innerHtml'。参见 https://www.chrisjmendez.com/2017/06/17/angular-dynamically-inserting-svg-into-an-element/