ngTemplateOutlet 是如何工作的？答案

【问题标题】：How does ngTemplateOutlet works?ngTemplateOutlet 是如何工作的？
【发布时间】：2021-09-14 13:30:47
【问题描述】：

我正在制作一个表格，用户可以在其中对其数据进行内联编辑。我得到了代码并根据我的需要进行了一些调整，它正在工作。但是在那里我遇到了一个代码：

template: `
    <ng-container *ngTemplateOutlet="currentView"></ng-container>
  `

this link 中的“currentView”指的是什么？我想在我自己的代码中使用它。我需要进行哪些更改才能完成这项工作？

【问题讨论】：

它指的是ngTemplate。你读过this documentation 吗？不明白的地方能不能说的更准确一点？
@ArnaudDenoyelle 正如您在链接中看到的那样，除了editable.component.ts 文件之外，没有提到“currentView”。我想知道“currentView”是从哪里来的。我试图在我的系统中使用此代码，但它不工作
@ArnaudDenoyelle 我尝试在我的项目中使用此代码，但此错误即将出现core.js:6479 ERROR TypeError: Cannot read properties of undefined (reading 'tpl') ，而 stackblitz 文件中没有显示错误
这是一个重要的话题，从历史上看，ngTemplateOutlet 的记录不足。尽管正如@ArnaudDenoyelle 所提到的，它最近在 Angular 文档中找到了归宿。我对您的问题 b/c 投了反对票，与您的查询相关的所有内容都包含在链接的 stackblitz 中。这是糟糕的 SO 实践；通常不依赖外部站点的内容来保持静态和可访问性。链接应谨慎使用，仅用于提供参考。如果必须点击链接才能理解您的问题，您需要提供更多信息。如果你修改，我会赞成。
@acat 我已经解决了这个问题。我给了模板的错误名称。这就是为什么它不能在我自己的代码中工作

标签： angular typescript angular-forms ng-template

【解决方案1】：

从提供的代码示例中，currentView 指的是 getter get currentView() {} 在此处返回的值：

@Component({
  selector: 'editable',
  template: `
    <ng-container *ngTemplateOutlet="currentView"></ng-container>
  `
})
export class EditableComponent implements OnDestroy {
  @Output() update = new EventEmitter();
  @ContentChild(ViewModeDirective) viewModeTpl: ViewModeDirective;
  @ContentChild(EditModeDirective) editModeTpl: EditModeDirective;

  mode: 'view' | 'edit' = 'view';

  editMode = new Subject();
  editMode$ = this.editMode.asObservable();

  /***************
   *    HERE     *
   ***************/
  get currentView() {
    return this.mode === 'view' ? this.viewModeTpl.tpl : this.editModeTpl.tpl;
  }

现在，错误消息可能意味着this.viewModeTpl 是undefined。

@ContentChild(ViewModeDirective) 查询ViewModeDirective，其中[viewMode] 作为选择器。这就是为什么它应该针对 <ng-template viewMode> 元素

由于代码看起来正确，我怀疑生命周期存在问题。我建议把代码改成这样（仅用于调试目的，这段代码很垃圾，但它有助于查看问题是否来自这里）：

  get currentView() {
    const template = this.mode === 'view' ? this.viewModeTpl : this.editModeTpl;
    return !!template ? template.tpl : undefined ;
  }

【讨论】：

我试过了，这个错误来了，Type 'TemplateRef<any> | undefined' is not assignable to type 'TemplateRef<any> | null'. Type 'undefined' is not assignable to type 'TemplateRef<any> | null'.ngtsc(2322) declare (property) NgTemplateOutlet.ngTemplateOutlet: TemplateRef<any> | null A string defining the template reference and optionally the context object for the template.
@SpaceBoi 请尝试将模板变量定义为可选，并附加一个?，如下所示：@ContentChild(ViewModeDirective) viewModeTpl?: ViewModeDirective;@ContentChild(EditModeDirective) editModeTpl?: EditModeDirective;
我想我修正了这个错误。现在我无法查看表中的值。你还有什么别的意思可以聊吗？ stackoverflow 聊天很不方便
@SpaceBoi @ContentChild(ViewModeDirective) 正在尝试查询以[viewMode] 作为选择器的ViewModeDirective。这就是为什么它应该针对<ng-template viewMode> 而在这一点上，我不知道为什么找不到它。您是否尝试删除除一个之外的每个<editable>，看看它是否有效？
天啊！！！我知道错误发生的地方。我的系统中的选择器不同。在那个 stackblitz 项目中是[viewModel]。在我的个人项目中，它是[appViewModel]。非常感谢我的朋友！

【解决方案2】：

错误是视图的模板名称和编辑 ng-template 被错误地引用。这就是为什么两者都无法找到值的原因

【讨论】：