Question

我一直在尝试在Angular中设计“内联编辑”组件。以下是设计和使用案例

 <toggle-editor>
    <toggle-normal></toggle-normal>
    <toggle-edit></toggle-edit>
</toggle-editor>

想法是用户还可以定义切换编辑器而无需子组件

切换正常
切换编辑

很像

<toggle-editor></toggle-editor>

在这种情况下，将呈现默认模板。

    <div (click)="toggle()">
    <ng-content></ng-content>
</div>

<ng-container *ngTemplateOutlet="!isEditing && !toggleNormal ? normalTmpl : null"></ng-container>
<ng-container *ngTemplateOutlet="isEditing && !toggleEdit? ? editTmpl : null"></ng-container>


<ng-template #normalTmpl> Markup for label</ng-template>
<ng-template #editTmpl> Markup for input </ng-template>

TS文件：

import { Component, ContentChild } from "@angular/core";
import { ToggleNormal } from "./toggle.normal.component";
import { ToggleEdit } from "./toggle.edit.component";

@Component({
    selector: 'toggle-editor',
    templateUrl: './toggle.editor.component.html'
})
export class ToggleEditor {
    isEditing: boolean = false;
    @ContentChild(ToggleNormal) toggleNormal: ToggleNormal;
    @ContentChild(ToggleEdit) toggleEdit: ToggleEdit;


    toggle(){
        this.isEditing = !this.isEditing;
    }

}

切换编辑组件TS：

import { Component } from "@angular/core";
import { ToggleEditor } from "./toggle.editor.component";

@Component({
    selector: 'toggle-edit',
    template: '<ng-content *ngIf="toggleEditor.isEditing"></ng-content>'
})
export class ToggleEdit {
    constructor(private toggleEditor: ToggleEditor) {

    }
}

如您所见，在此设计中……ToggleEditor依赖于ToggleEdit，而ToggleEdit依赖于ToggleEditor是出于自己的原因。所以问题在于循环依赖...

如果我不提供默认模板，并且没有 ToggleNormal 和 ToggleEdit 的内容子级，则不会有循环依赖关系，但我想拥有提供默认模板的设计目标。

不确定如何处理此情况... ??

Answer 1

您应该让父母导入孩子或让孩子导入父母。两者都不是。

如果ToggleEdit需要了解父项，则可以在构造函数中设置toggleEditor.hasToggleEdit = true。然后ToggleEditor可以使用hasToggleEdit来检查是否使用默认模板。

使用该方法可能会遇到变更检测问题，在这种情况下，您需要ToggleEdit调用toggleEditor.registerToggleEdit()，并且该函数应如下所示：

registerToggleEdit() {
  this.hasToggleEdit = true;
  this.changeDetectorRef.detectChanges();
}

角度内联编辑设计

1 个答案: