Angular 2自定义ngIf指令报错：Declaration or statement expected

我帮你找出了问题所在，咱们一步步来解决这个错误：

问题根源分析 #

你遇到的错误主要来自两个地方：

• TypeScript命名规则冲突：你在@Input()的setter里写了set my-custom-if(condition: boolean)，但TypeScript不允许标识符（属性、方法名）包含连字符-，这直接触发了"Declaration or statement expected"错误。
• 代码未完成：你的this.viewContai...是截断的代码，缺少完整的视图操作逻辑。

修正后的完整代码 #

下面是修复好的自定义指令代码，完美模拟ngIf的核心功能：

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

@Directive({ selector: '[my-custom-if]' })
export class MyCustomIfDirective {
  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef
  ) { }

  // 关键：把连字符命名改成驼峰式，Angular会自动处理模板中连字符属性的映射
  @Input() set myCustomIf(condition: boolean) {
    if (condition) {
      // 条件为真时，将模板内容渲染到视图容器中
      this.viewContainer.createEmbeddedView(this.templateRef);
    } else {
      // 条件为假时，清空视图容器里的内容
      this.viewContainer.clear();
    }
  }
}

关键细节说明 #

1. 属性名映射规则：
   Angular支持模板中用连字符写法（比如*my-custom-if="isVisible"），它会自动把my-custom-if映射成类里的驼峰式属性myCustomIf，这既符合HTML的属性命名习惯，又满足TypeScript的语法要求。
2. 核心逻辑解析：
   • TemplateRef<any>：获取到指令所在的模板内容
   • ViewContainerRef：控制模板内容的渲染和移除，createEmbeddedView用来插入模板，clear用来清空视图
3. 模板使用示例：
   在组件模板里使用这个自定义指令和原生ngIf几乎一样：

   <h2 *my-custom-if="displayTitle">自定义ngIf生效啦！</h2>
   

内容的提问来源于stack exchange，提问作者Cláudio Ribeiro