Question

我在strokeText.js周围做了一个指令包装，它通过canvas api为文本添加一个笔画（或＃34;大纲＆＃34;）。在某些情况下，我正在抚摸动态文本，它会根据用户输入而改变。所以我把它设置成这样：

<h2 strokeText [textContent]="totalPoints"></h2>

我的指令实现OnChanges以对绑定输入totalPoints的更改作出反应，以便它可以重新描述文本：

import { Directive, ElementRef, Input, AfterViewInit, OnChanges } from '@angular/core';
import * as StrokeText from 'stroketext.js';

@Directive({
    selector: '[strokeText]'
})
export class StrokeTextDirective implements AfterViewInit, OnChanges {
    stroked: any;

    @Input('strokeText') params: Array<any>;
    @Input() textContent: string;

    constructor(private el: ElementRef) {   }

    ngAfterViewInit() {
        this.createStrokeText();
    }

    ngOnChanges(changes) {
        console.log('changes', changes);
        this.createStrokeText();
    }

    private createStrokeText() {
        const thick = this.params[0] ? parseFloat(this.params[0]) : 3;
        const color = this.params[1] ? this.params[1] : 'white';

        if (this.stroked) { this.stroked.reset(); }
        this.stroked = new StrokeText(this.el.nativeElement);
        this.stroked.stroke(thick, color);

    }
}

然而，这会立即抛出Cannot read property 'name' of undefined, at checkBindingNoChanges (core.js:9912)。即使我注释掉所有的strokeText内容，我仍然会收到错误。（Angular v5.2.0）

StrokeText.js没有name属性，也没有这个指令。我之前使用Angular时遇到此错误，处理绑定属性时似乎是一个Angular错误。

我不知道它是否不喜欢我重复使用内置的textContent指令，或者是否有其他错误。最终结果是，即使设置了totalPoints，它也不会在h2内显示任何文本。我知道，因为我可以做到

<h2 strokeText>{{ totalPoints }}</h2>

它工作正常，它只是对变化没有反应，并且中风不会更新。

更新：只需删除输入属性textContent也可以修复错误，但它又无法对更改做出反应。

https://plnkr.co/edit/jALd0GQhPSXOLrnJMO7W?p=preview

Answer 1

Angular不允许您重复使用内置的Angular指令作为您自己的指令的属性。

您必须将相同的属性传递给名称不同的属性，如下所示：

<h1 strokeText [textToStroke]="totalPoints" [textContent]="totalPoints"></h1>

然后你可以像我在我的问题中那样使用ngOnChanges来对变化做出反应。演示：

https://plnkr.co/edit/wJM9InkTxdDn3GIVS4yy?p=preview

附注，将Angular从5.2.0升级到5.2.4会使错误消失，并且在尝试将内置指令重用为我自己的指令属性时，不会呈现该指令。

Angular：重新使用textContent作为Input属性会导致错误

1 个答案: