SVG+；Angular2代码示例不适用于插值_Svg_Angular

SVG+；Angular2代码示例不适用于插值

svg angular

SVG+；Angular2代码示例不适用于插值,svg,angular,Svg,Angular,我的目标是将代码从Angular 1.3转换为Angular 2（在这两种情况下都使用SVG）我尝试了以下简单的测试代码，它适用于不涉及插值的情况#1，但不适用于情况#2（使用插值），AFAICS生成的SVG代码中唯一的区别是在元素中包含了一个额外的属性：class=“ng binding” 是否有方法抑制前面的类属性，或者是否有其他解决方案顺便说一句，我不能得到格式完全正确（我的道歉） HTML网页的内容： <html> <head> <titl

我的目标是将代码从Angular 1.3转换为Angular 2（在这两种情况下都使用SVG）

我尝试了以下简单的测试代码，它适用于不涉及插值的情况#1，但不适用于情况#2（使用插值），AFAICS生成的SVG代码中唯一的区别是在元素中包含了一个额外的属性：class=“ng binding”

是否有方法抑制前面的类属性，或者是否有其他解决方案

顺便说一句，我不能得到格式完全正确（我的道歉）

HTML网页的内容：

<html> 
  <head>
    <title>SVG and Angular2</title>
    <script src="quickstart/dist/es6-shim.js"></script>
  </head>

  <body> 
    <!-- The app component created in svg1.es6 --> 
    <my-svg></my-svg>

    <script>
      // Rewrite the paths to load the files
      System.paths = {
        'angular2/*':'/quickstart/angular2/*.js', // Angular
        'rtts_assert/*': '/quickstart/rtts_assert/*.js', // Runtime assertions
        'svg': 'svg1.es6' // The my-svg component
      };

      System.import('svg');
    </script>    
  </body>
</html>


SVG和Angular2
//重写路径以加载文件
系统路径={
“angular2/*”：“/quickstart/angular2/*.js”，//angular2/*.js”
'rtts_assert/*'：'/quickstart/rtts_assert/*.js'，//运行时断言
'svg'：'svg1.es6'//我的svg组件
};
System.import（'svg'）；

JS文件的内容：

import {Component, Template, bootstrap} from 'angular2/angular2';

@Component({
  selector: 'my-svg'
})

    @Template({
    //case 1 works:
      inline: '<svg>&lt;ellipse cx="100" cy="100" rx="80" ry="50" fill="red"&gt;&lt;/ellipse&gt;</svg>'


//case 2 does not work:
//inline: "<svg>{{graphics}}</svg>"
})    

class MyAppComponent {
  constructor() {
    this.graphics = this.getGraphics(); 
  }   

  getGraphics() { 
     // return an array of SVG elements (eventually...)
     var ell1 = 
        '<ellipse cx="100" cy="100" rx="80" ry="50" fill="red"></ellipse>';
     return ell1;
  } 
}

bootstrap(MyAppComponent);

从'angular2/angular2'导入{组件、模板、引导程序}；
@组成部分({
选择器：“我的svg”
})
@模板({
//案例1工作：
内联：“ellipse cx=“100”cy=“100”rx=“80”ry=“50”fill=“red”/ellipse”
//案例2不起作用：
//内联：“{{graphics}}”
})    
类MyAppComponent{
构造函数（）{
this.graphics=this.getGraphics（）；
}   
getGraphics（）{
//返回SVG元素数组（最终…）
变量ell1=
'';
返回ell1；
} 
}
bootstrap（MyAppComponent）；

SVG元素与HTML元素使用不同的名称空间。将SVG元素插入DOM时，需要使用正确的SVG名称空间插入它们

案例1之所以有效，是因为您将整个SVG（包括

标记）插入到HTML中。浏览器将自动使用正确的名称空间，因为它可以看到

标记并知道该做什么

案例2不起作用，因为您只是插入了一个

标记，而浏览器没有意识到它应该是用svg名称空间创建的

如果您使用浏览器的DOM检查器检查两个SVG，并查看

标记的

名称空间

属性，您应该会看到差异。

您可以使用HTML元素的

outerHtml

，如：

@Component({
  selector: 'my-app',
  template: `
    <!--
      <svg xmlns='http://www.w3.org/2000/svg'><ellipse cx="100" cy="100" rx="80" ry="50" fill="red"></ellipse></svg>
    --> 

    <span [outerHTML]="graphics"></span>`
})
export class App {
  constructor() {
    this.graphics = this.getGraphics();
  }

  getGraphics() {
     // return an array of SVG elements (eventually...)
     var ell1 =
        '<svg><ellipse cx="100" cy="100" rx="80" ry="50" fill="red"></ellipse></svg>';
     return ell1;
  }
}

@组件({
选择器：“我的应用程序”，
模板：`
`
})
导出类应用程序{
构造函数（）{
this.graphics=this.getGraphics（）；
}
getGraphics（）{
//返回SVG元素数组（最终…）
1号变种=
'';
返回ell1；
}
}

请注意，添加的字符串必须包含

…

另请参见

如果无法插入整个SVG，则需要使用

document.createElements（）

等自己创建元素。