javascript - ngIf=false with ngContent 仍然加载模板绑定(bind)

Question

定义一个简单的组件如下:

@Component({
  selector: 'loader',
  template: `<div *ngIf='false'>
        <ng-content></ng-content>
        </div>`,
})
export class Loader {}

像这样使用时:

  <loader>
      {{model.something}}
  </loader>

如果模型在父级中未定义，我仍然会收到模板绑定(bind)错误，因为即使使用 ngIf=false，它也会尝试解析绑定(bind)。为什么会这样？

Answer 1

因为要投影到 ngContent 元素中的 loader 组件的内部内容，会使用当前组件上下文(this )，即使组件模板没有注入(inject) DOM。

它的工作方式与 ng-transclude 在 Angular 1.X 中的工作方式相同

你应该在这里使用Elvis Operator来避免这样的问题

<loader>
    {{model?.something}}
</loader>