自定义 Angular 结构指令仅适用于星号语法答案

【问题标题】：Custom Angular structural directive only works with asterisk syntax自定义 Angular 结构指令仅适用于星号语法
【发布时间】：2019-01-22 23:23:08
【问题描述】：

我创建了一个 Angular 结构指令，但它仅适用于 * 语法，而不适用于“扩展”<ng-template> 语法。

快速reminder：

当你在结构指令前面加上星号时，例如*ngIf="xxx"，模板编译器会扩展它，所以下面是等价的：

<p *ngIf="condition">
  Our heroes are true!
</p>

<ng-template [ngIf]="condition">
  <p>
    Our heroes are true!
  </p>
</ng-template>

所以我创建了自己的指令（基于 ngIf 源代码）：

@Directive({
    selector: '[featureBoxLoader]'
})
export class FeatureBoxLoaderDirective {

    private _thenTemplateRef: TemplateRef<any>|null = null;

    constructor(private _viewContainer: ViewContainerRef, 
                private templateRef: TemplateRef<any>) 
    {
        this._thenTemplateRef = templateRef;
    }

    ngOnInit()
    {
        alert('yes it works!');
        this._viewContainer.createEmbeddedView(this._thenTemplateRef, { $implicit: { numbers: [1, 2, 3] } } );
    }
}

该指令在我的模块中声明，当我像这样使用它时它工作正常：

  <div *featureBoxLoader>
     This is my feature box
  </div>

但是，当我这样做时，我得到一个错误：

 <ng-template [featureBoxLoader] let-data></ng-template>

错误是：

无法绑定到“featureBoxLoader”，因为它不是 'ng 模板'。 1. 如果 'featureBoxLoader' 是 Angular 指令，则将 'CommonModule' 添加到该组件的 '@NgModule.imports' 中。 2. 要允许任何属性添加“NO_ERRORS_SCHEMA”到该组件的“@NgModule.schemas”。

发生了什么事？很明显找到了，但我需要为let 使用<ng-template> 语法。

【问题讨论】：

标签： angular angular-template

【解决方案1】：

不同之处在于，在*ngIf 示例中，您提供了一个参数（以及ng_if directive implementation 中相应的@Input 参数）。

[ngIf]="condition"

当您只是在没有条件的情况下应用指令时，括号不是必需的。

所以正确的语法就是：

<ng-template featureBoxLoader let-data></ng-template>

【讨论】：