1

我使用单个选项卡延迟加载具有某些控件的内容，这些控件依赖或需要初始化，例如我们的 3rd 方编辑器（例如 TinyMCE）。

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

编辑器-wrapper.component.html

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

编辑器包装器.component.ts

editor_control: FormControl;

constructor() {
  this.editor_control = new FormControl('Editor text... sample..');
  console.log('foo foo');
}

console.log('foo foo');并且在导航回堡垒时似乎继续打印，这意味着editor-wrapper.component正在重置/重新初始化。

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

请查看此演示

更新

输入文本是通过使用[(ngModel)]基于@Arash 注释来解决的。

4

2 回答 2

0

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

于 2018-05-21T11:19:31.277 回答
0

通过使用和维护数据来监听编辑器更改（keyup 和更改事件），我能够提出这个肮脏的解决方案。@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>

编辑器包装器.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);
}

工作演示

于 2018-05-21T12:41:47.163 回答