ngTemplateOutlet 是如何工作的？

Question

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

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

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

Answer 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) 查询具有 [viewMode] 作为选择器的 ViewModeDirective。这就是为什么它应该针对 <ng-template viewMode> 元素

由于代码看起来是正确的，我怀疑生命周期有问题。我建议将代码更改为这样的代码（仅用于调试目的，这段代码很垃圾，但有助于查看问题是否出自此处）：

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

Answer 2

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

ngTemplateOutlet 是如何工作的？

How does ngTemplateOutlet works?

typescript

ng-template

angular

angular-forms