Question

我正在开发一个使用SVG库的角度应用程序。在我的组件中，我使用函数在ngAfterViewInit上启动画布加载。当我点击一个对象并且事件触发时，我正在尝试从函数调用中设置一个属性。

我创建了一个简单的plunker，我只想让属性'title'更改为新值。我尝试设置的'this.title'值的控制台日志具有新值，但视图不会更改。如何触发视图更改？

我认为这需要一个可观察的，但正如我所知，我对这个概念有点麻烦。提前致谢

import {Component, NgModule, ngOnInit, ngAfterViewInit} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

declare var Snap: any;

@Component({
  selector: 'my-app',
  template: `<p>{{title}}</p><svg id="svg"></svg>

`,
})
export class App implements OnInit,AfterViewInit {
  title: string = "Old Title";



  constructor(){}

  ngOnInit(){

  }

  ngAfterViewInit(){
    this.initcanvas();
  } 

  initcanvas(){
    var title;
    var canvas = Snap("#svg");
    canvas.circle(25,25,20,20).attr({fill: "black"});
    canvas.click(function(e){ console.log('clicked');
                  title = "New Title";
                  this.title= title; 
                  console.log(this.title);
                  console.log(title);
                  canvas.circle(25,25,20,20).attr({fill: "red"}); })
    canvas.append();
  }
}

Answer 1

正如@LLai所提到的，问题是您正在.click()方法中构建一个具有包含范围的函数。将其从function()声明交换为箭头语法，以将函数的范围设置为整个组件：

canvas.click((e) => { console.log('clicked');
              title = "New Title";
              this.title= title; 
              console.log(this.title);
              console.log(title);
              canvas.circle(25,25,20,20).attr({fill: "red"}); }

这是你的working plunker分叉。

Answer 2

您只需要仔细阅读文档。

http://snapsvg.io/docs/#Element.node 
https://plnkr.co/edit/hYKtZPzvSQehj3DKO5Et?p=preview

如何在点击事件中更改角度4属性？

2 个答案: