Question

我的自定义指令中的时间有问题。这是一个复制品：https://stackblitz.com/edit/angular-gufrps

该指令应添加或删除有关属性值的文本。使用@Input() set myDir(v: boolean) {}方法触发内容更改。问题是如果init值设置为true，它还没有设置options，因此会抛出错误。如何解决这个问题？我应该使用timeout吗？我认为这是一个肮脏的解决方案，希望还有另一个。

Answer 1

问题是，您在设置add()时立即调用myDir来添加消息，此时它没有myDirOptions，因此代码正在破坏。我已将您的代码修改为：

<强> HTML

<div 
    [myDir]="showHello"
    [myDirOptions] = "myDirOptions"
    style="width:200px; height:200px; background: yellow"></div>

<强> component.ts

myDirOptions={text:' Hello'};

<强> directive.ts

private showMessage: any;

@Input()
set myDir(v: boolean) {
    console.log('Value set: ', v);
    this.showMessage = v;
    if (v) {
      this.add();
    } else {
      this.remove();
    }
}

@Input()
set myDirOptions(v: any) {
    this.options = v;
    if(this.showMessage != undefined) {
        this.showMessage ? this.add() : this.remove();
    }
}

add() {
    if(this.options) {
      console.log('options: ', this.options);
      this.el.innerHTML='Hello '+ this.options.text;
    }
}

工作DEMO

指令中的时间 - 没有完整的初始值

1 个答案: