Как избежать ленивой загрузки мат-вкладки для сброса элементов управления / компонентов - PullRequest
Новая
       26

Как избежать ленивой загрузки мат-вкладки для сброса элементов управления / компонентов

0 голосов
/ 21 мая 2018

Я использую одну вкладку для отложенной загрузки содержимого с некоторым элементом управления, который зависит или требует инициализации, например, от стороннего редактора (например, TinyMCE).

Мне удавалось интегрировать элементы управления, однако у меня возникает эта проблема всякий раз, когдамы переходим на другую вкладку, в которой элемент управления продолжает сбрасываться (СЕЙЧАС в этом случае редактор TinyMCE обернут внутри другого компонента) .

editor-wrapper.component.html 

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

editor-wrapper.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 сбрасывает / реинициализирует.

Как мы можем избежать этого?Нет возможности просто лениво загрузить вкладку в течение одного или первого раза, когда пользователь перемещается?

Пожалуйста, отметьте это demo

ОБНОВЛЕНИЕ

Ввод текста был решен с помощью [(ngModel)] на основе комментария @Arash.

Ответы [ 2 ]

0 голосов
/ 21 мая 2018

Мне удалось придумать это грязное решение, прослушав изменения в редакторе (событие keyup and change) с использованием @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;
}

Теперь в оболочке редактора я написал это:

editor-wrapper.html 

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

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

0 голосов
/ 21 мая 2018

Вы можете попробовать [(ngModel)]="input_str" для вкладки Ленивая загрузка.

...