ngTemplateOutlet是如何工作的?

Question

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

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

在这个链接中'currentView'指的是什么?我想在我自己的代码中使用它。我需要做哪些更改才能使其工作?

Answer 1

从提供的代码示例中，currentView指这里的getterget 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引用错误。这就是为什么两者都无法定位

值的原因。