Angular 2 Have方法打印出svg多边形点

Angular 2是一种流行的前端开发框架，它使用TypeScript编写，并且具有许多强大的功能和工具。在Angular 2中，可以使用Have方法来打印出svg多边形的点。

首先，需要在Angular 2项目中引入svg多边形的相关模块。可以使用以下代码导入svg模块：

import { Component } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
  selector: 'app-svg-polygon',
  template: `
    <svg [innerHTML]="svgPolygon"></svg>
  `,
})
export class SvgPolygonComponent {
  svgPolygon: SafeHtml;

  constructor(private sanitizer: DomSanitizer) {
    this.svgPolygon = this.getPolygonPoints();
  }

  getPolygonPoints(): SafeHtml {
    const points = [
      [100, 100],
      [200, 50],
      [300, 150],
      [250, 300],
      [150, 300]
    ];

    let svg = '<polygon points="';

    points.forEach(point => {
      svg += `${point[0]},${point[1]} `;
    });

    svg += '" style="fill:blue;stroke:black;stroke-width:2" />';

    return this.sanitizer.bypassSecurityTrustHtml(svg);
  }
}

在上述代码中，我们创建了一个名为SvgPolygonComponent的组件，并在构造函数中调用了getPolygonPoints()方法来获取svg多边形的点。getPolygonPoints()方法使用一个二维数组来定义多边形的各个点的坐标。然后，我们使用forEach循环遍历这些点，并将它们拼接成一个svg多边形的字符串。最后，我们使用DomSanitizer来确保这个字符串是安全的，并将其赋值给svgPolygon变量。

在组件的模板中，我们使用[innerHTML]属性来动态地将svgPolygon变量的值渲染为svg元素。

这样，当SvgPolygonComponent组件被渲染时，它将在页面上显示一个具有指定多边形点的svg图形。

推荐的腾讯云相关产品和产品介绍链接地址：

• 腾讯云云服务器（CVM）：提供可扩展的云服务器实例，用于运行和托管应用程序。
• 腾讯云对象存储（COS）：提供安全、耐用且高度可扩展的对象存储服务，用于存储和访问大量的非结构化数据。
• 腾讯云云数据库MySQL版（TencentDB for MySQL）：提供高性能、可扩展的关系型数据库服务，用于存储和管理结构化数据。
• 腾讯云人工智能（AI）：提供各种人工智能服务和工具，包括图像识别、语音识别、自然语言处理等，用于构建智能化的应用程序。
• 腾讯云物联网（IoT）：提供全面的物联网解决方案，包括设备管理、数据采集、数据分析等，用于构建物联网应用。
• 腾讯云移动开发（Mobile）：提供移动应用开发和运营的一站式解决方案，包括移动后端服务、推送服务、移动分析等。
• 腾讯云云函数（SCF）：提供事件驱动的无服务器计算服务，用于构建和运行无需管理服务器的应用程序。
• 腾讯云区块链（BCS）：提供易于使用的区块链服务，用于构建和部署区块链网络和应用。
• 腾讯云游戏多媒体引擎（GME）：提供游戏音视频通信和处理的解决方案，用于构建多人在线游戏和社交应用。

请注意，以上推荐的腾讯云产品仅供参考，具体选择应根据实际需求和项目要求进行评估。