建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
創(chuàng)新互聯(lián)Angular教程：AngularSVG作為模板
SVG 作為模板
你可以在 Angular 應(yīng)用程序中將 SVG 文件用作模板。當(dāng)你使用 SVG 作為模板時(shí)，就可以像 HTML 模板一樣使用指令和綁定。使用這些功能，你可以動(dòng)態(tài)生成交互式圖形。
我們提供的服務(wù)有：成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、惠陽(yáng)ssl等。為近千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的惠陽(yáng)網(wǎng)站制作公司
包含本章代碼片段的工作實(shí)例參閱現(xiàn)場(chǎng)演練 / 下載范例。
SVG 語(yǔ)法示例
以下示例展示了將 SVG 用作模板的語(yǔ)法。
import { Component } from '@angular/core';
@Component({
selector: 'app-svg',
templateUrl: './svg.component.svg',
styleUrls: ['./svg.component.css']
})
export class SvgComponent {
fillColor = 'rgb(255, 0, 0)';
changeColor() {
const r = Math.floor(Math.random() * 256);
const g = Math.floor(Math.random() * 256);
const b = Math.floor(Math.random() * 256);
this.fillColor = `rgb(${r}, ${g}, $)`;
}
}要想查看屬性和事件綁定的實(shí)際效果，請(qǐng)把以下代碼添加到你的 ?svg.component.svg? 文件中：
這個(gè)例子使用了事件綁定語(yǔ)法 ?click()? 和屬性綁定語(yǔ)法（?[attr.fill]="fillColor"?）。
本文名稱：創(chuàng)新互聯(lián)Angular教程：AngularSVG作為模板
網(wǎng)頁(yè)URL：http://m.fisionsoft.com.cn/article/djjdpsj.html
