Question

我使用单个标签来延迟加载内容，其中某些控件依赖于或需要初始化，例如我们的第三方编辑器（例如TinyMCE）。

我设法集成了控件，但每当我们导航到另一个选项卡时，我都会遇到这个问题，控件一直在重置（现在这个案例是TinyMCE编辑器包含在另一个组件中）。

主编wrapper.component.html

.footer-inner {
  display: grid;
  grid-template-columns: 100% 1fr 1fr 1fr; 
  /* AND THIS */
  grid-template-columns: 100% 33.333% 33.333% 33.333%;
}

主编wrapper.component.ts

<p>
    <editor [formControl]="editor_control"></editor>
</p>

似乎editor_control: FormControl; constructor() { this.editor_control = new FormControl('Editor text... sample..'); console.log('foo foo'); }在向后导航时保持打印，这意味着console.log('foo foo');正在重置/重新初始化。

我们怎样才能避免这种情况？没有选项只是懒惰加载选项卡一次或第一次用户导航？

请检查 demo

更新

根据@Arash评论使用editor-wrapper.component来解决输入文本。

Answer 1

您可以尝试使用[(ngModel)]="input_str"标签进行延迟加载。

Answer 2

通过使用@Output和@Input聆听编辑器更改 （键盘和更改事件） ，我能够提出这个肮脏的解决方案保持数据。

这会将数据存储到父级组件并保证其安全尽管子组件重置，重新初始化甚至销毁，如果数据未定义，则将其分配回子组件编辑器内容（FormControl）。

<强> app.component.html

<app-editor-wrapper 
    (editorChanged)="onEditorChanged($event)" 
    [editorContent]="editor_content_string">
</app-editor-wrapper>

<强> app.component.ts

editor_content_string: string;

onEditorChanged(e: any) {
    this.editor_content_string = e;
}

现在在编辑器包装器上我写了这个：

<强>主编wrapper.html

<editor 
   (keyup)="onTinyEditorChange($event)" 
   (change)="onTinyEditorChange($event)" 
   [formControl]="editor_control">
</editor>

<强>主编wrapper.ts

@Input()
editorContent: string;

@Output()
editorChanged = new EventEmitter<string>();

editor_control: FormControl;

// Do not initialize FormControl here.
// editorContent will always undefined in this scope.
contructor() {} 

ngOnInit() {
    this.editor_control = new FormControl(this.editorContent || '');
}

onTinyEditorChange(e: any) {
    this.editorChanged.emit(this.editor_control.value);
}

正在使用 DEMO

如何避免mat-tab延迟加载来重置控件/组件

2 个答案: