Как поддерживать данные формы постоянно по всей сети? - PullRequest
Новая
       4

Как поддерживать данные формы постоянно по всей сети?

0 голосов
/ 29 января 2019

Как определить глобальные переменные в angular7 и как это помогает в поддержании данных формы

1 Ответ

0 голосов
/ 29 января 2019

1) СОХРАНЕНИЕ ДАННЫХ В ПАМЯТИ

Прежде всего вам необходимо сохранить данные формы в локальном объекте в вашем компоненте.
Итак, начиная с вашего компонента, я ожидал бы что-то вроде:

foo.component.html 

<!-- ... more stuff here ... -->

<!-- IMPORTANT: [(ngModel)]  -->
<input type="text" id="name" class="fooclass" required [(ngModel)]="formvalues.name" placeholder="Name goes Here" name="name" />

<!-- ... more stuff here ... -->

foo.component.ts

//more stuff here
formvalues: MyForm;

constructor ( /* ... */ ) {
   this.formvalues = new MyForm();
}

Тогда MyForm - это класс, и классы могут быть импортированы и использованы внутри нескольких компонентов без каких-либо проблем.Вы объявите этот класс в другом файле, например:

myform.class.ts 

export class MyForm {
  name: string = '';
  surname: string = '';
}

Теперь вернитесь внутрь foo.component.ts.Мы добавим пару функций для сохранения и восстановления состояния.
Мы сохраним в sessionStorage, но вы можете использовать localStorage, если хотите.
По сути, sessionStorage находится на вкладке браузера и не отображается на других вкладках. Если вы закроете ту, которая вам нужна, ее содержимое будет потеряно.localStorage живет вечно, и вы должны очистить его вручную.
Вы можете узнать больше о sessionstorage и localalstorage здесь. 

saveState() {
  if(this.formvalues && this.formvalues!=null){
    var tosave: string = JSON.stringify(this.formvalues);
    sessionStorage.setItem('myappFormData',tosave);
  }
}

resumeState() {
  var restorestring = sessionStorage.getItem('myappFormData');
  if(restorestring && restorestring!='' && restorestring!=null && restorestring!='null'){
    var restore: MyForm = restorestring as MyForm;
    this.formvalues = restore;
  }
  else {
    this.formvalues = new MyForm();
  }
}

Теперь вы можете звонить this.resumeState(); внутри NgOnInit() вашего компонента и this.saveState(); когда ... Ну, я не знаю, когда пользователь сохраняет форму с помощью нажатия кнопки, я думаю.Это зависит от того, что пользователь должен делать.

Если вы используете рендеринг Angular Universal и / или на стороне сервера, sessionSotrage и localStorage не будут работать. К счастью, Angular предоставляет некоторые абстракции для этого .

2) СВЯЗЬ МЕЖДУ КОМПОНЕНТАМИ

Если вы хотите в реальном времени общаться между компонентами, я предлагаю вамиспользовать service в качестве промежуточного программного обеспечения, например:

foobar.service.ts 

@Injectable()
export class FooBarService {

  private value = new BehaviorSubject<MyForm>(null);
  value$ = this.value.asObservable();

  //more stuff here...

  updateValue(newVal:MyForm) {
     this.value.next(newVal);
  }
}

Теперь компоненты могут подписываться следующим образом: 

myservice.value$.subscribe(res => this.formvalues=res);

И выдвигайте значения типа 

myservice.updateValue(formValues);

Обратите внимание:

  • Я использовал BehaviorSubject, если вы не хотите использовать значение по умолчанию, вы можете использоватьSubject

И

  • Значения внутри служб живут по мере существования приложения.Таким образом, если пользователь выходит, значения теряются.Если вы сохраните их внутри localStorage, они могут сохраниться

Дайте мне знать в комментарии, если у вас есть какие-либо сомнения!

...