Question

我遇到属性绑定问题

@Component({
    selector: '[app-shape]',
    template: `
    <svg:image [attr.x]="helpline_x" [attr.y]="helpline_y" width="460" height="460" id="helpline" style="display:none" xmlns:xlink="http://www.w3.org/1999/xlink"
                                [attr.xlink:href]="helpline_href"></svg:image>

    `,
})

export class ShapeComponent {

    helpline_href = "Line.png";
    helpline_x = 0; helpline_y = 0;

    setupShape(): void {
        this.helpline_href = "1";
    }
}

当我在包含此组件后从另一个组件调用setupShape（）时：ShapeComponent.setupShape(); xlink：href不会改变。

但是当我添加更多代码时，xlink：href将更改为＆＃34; 1＆＃34;。

setupShape(): void {
      this.applyToDesigner();
      this.helpline_href = "1";
}
applyToDesigner():void {
setTimeout(function() {
      this.helpline.setAttribute("xlink:href","2");
   }, 100); 
}

谁可以和你探讨一下？

Answer 1

我已经解决了这个问题。因为我使用

    import { ShapeComponent } from './shape/shape.component';
    @Component({
      selector: 'my-app',
      templateUrl: "app.component.html",
       providers: [
         ShapeComponent
       ],
    })
    constructor(private shapeComponent: ShapeComponent) {  }
    ... 
    //call this
    this.shapeComponent.setupShape();

相反，我应该使用ViewChild和删除提供程序：

import { ShapeComponent } from './shape/shape.component';
        @Component({
          selector: 'my-app',
          templateUrl: "app.component.html"
        })
        @ViewChild(ShapeComponent) shapeComponent: ShapeComponent;
        ... 
        //call this
        this.shapeComponent.setupShape();

现在，我可以将xlink：href更改为“1”而不使用applyToDesigner()

结果：因为我在ViewChild和服务提供商之间混淆了。

结束：不要将提供程序用于组件。

与svg在angular 2问题中的属性绑定

1 个答案: