Angular自定义结构指令改名后报NG0303错误，求原因

这是因为自定义结构指令的选择器名称与对应的输入属性名称不匹配导致的。

Angular的结构指令*语法是语法糖，会自动展开成如下形式：
当你写 <div *visbleIf="available">...</div> 时，Angular会将其转换为：

<ng-template [visbleIf]="available">
  <div>...</div>
</ng-template>

此时Angular会尝试给ng-template绑定visbleIf属性，但你的指令中只有名为ttIf的输入属性（即@Input() set ttIf(condition: boolean)），并没有与选择器[visbleIf]对应的visbleIf输入属性，所以Angular会抛出“无法绑定到visbleIf，因为它不是div的已知属性”的错误（实际是展开后的ng-template找不到对应输入）。

修改指令的输入属性名称，使其与选择器名称一致：

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[visbleIf]' // 修改后的选择器
})
export class ApphighlightStrucDirective {

  _visible: boolean = false;
  constructor(private templateRef: TemplateRef<any>,
    private vcRef: ViewContainerRef) { }

  @Input()
  set visbleIf(condition: boolean) { // 改为与选择器同名的输入属性
    this._visible = condition
    this._updateView();
  }

  _updateView(): void {
    if (this._visible) {
      this.vcRef.createEmbeddedView(this.templateRef);
    }
    else {
      this.vcRef.clear();
    }
  }
}

这样修改后，Angular展开语法糖时，绑定的[visbleIf]就能匹配到指令中的输入属性，错误就会消失。

内容的提问来源于stack exchange，提问作者Unknown