如何在Angular 2中将javascript文件生成的svg作为组件显示？

在Angular 2中，可以将JavaScript文件生成的SVG作为组件显示。下面是一种实现方法：

1. 首先，确保你已经安装了Angular CLI并创建了一个新的Angular项目。
2. 在项目的根目录下，创建一个新的组件，可以使用以下命令：ng generate component svg-component
3. 在生成的组件文件夹中，找到svg-component.component.ts文件，并打开它。
4. 在组件类中，导入ViewChild和ElementRef：import { Component, ViewChild, ElementRef } from '@angular/core';
5. 在组件类中，使用ViewChild装饰器来获取SVG元素的引用：@ViewChild('svgElement') svgElement: ElementRef;
6. 在组件的HTML模板中，添加一个带有#svgElement标识符的SVG元素：<svg #svgElement></svg>
7. 在组件类中，使用ngAfterViewInit生命周期钩子来确保SVG元素已经加载完毕，并在其中生成SVG内容：ngAfterViewInit() { // 获取SVG元素的引用 const svg = this.svgElement.nativeElement;

 // 创建SVG内容

 const svgContent = `<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">

                       <circle cx="100" cy="100" r="50" fill="red" />

                     </svg>`;

 // 将SVG内容插入到SVG元素中

 svg.innerHTML = svgContent;

}

1. 最后，在组件的HTML模板中，使用svgElement来显示SVG内容：<div [innerHTML]="svgElement.innerHTML"></div>

这样，你就可以在Angular 2中将JavaScript文件生成的SVG作为组件显示了。请注意，这只是一种实现方法，你可以根据具体需求进行调整和优化。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云对象存储（COS）。

• 腾讯云云服务器（CVM）：提供可扩展的云服务器，适用于各种规模的应用程序和工作负载。了解更多信息，请访问：腾讯云云服务器
• 腾讯云对象存储（COS）：提供安全、稳定、低成本的对象存储服务，适用于存储和处理各种类型的数据。了解更多信息，请访问：腾讯云对象存储