Отображение значения из локального хранилища в Angular Page

Question

Это должно быть что-то тривиальное, но я не могу понять это для моей жизни.

Что мне нужно - это поле ввода, которое по умолчанию заполняется для пользователя из значения из локального хранилища.

Проблема, с которой я столкнулся, заключается в том, что ни один из способов, которыми я обычно делаю это (загрузка jQuery, загрузка JS или (onload) в теге HTML), кажется, не запускается, когда пользователь переключается на другую страницу. без перезагрузки. Я также пробовал ngOnInit(), но, похоже, он работает до того, как DOM-контент страницы готов к редактированию и здесь не работает.

Вот мой код:

<form (submit)="editName($event)">
  <div class="form-group">
    <label for="nameInput">Name</label>
    <!-- I want to insert the localStorage Value user_name into this input -->
    <input type="name" class="form-control" id="nameInput" (onload)="initName()"> 
  </div>
  <button type="submit" class="btn btn-primary">Save changes</button>
</form>

Печальная попытка добиться этого также есть в моем component.ts:

initName() {
  document.getElementById("nameInput").textContent = localStorage.getItem('user_name');
}

Сообщение об ошибке в моей консоли:

ERROR TypeError: Cannot read property 'user_name' of undefined

Answer 1

Я бы рекомендовал использовать Angular ReactiveForm в этом случае вместо ручного извлечения и привязки значения.

В вашем компоненте создайте экземпляр FormGroup и привяжите значение из localStorage к элементу управления формы:

@Component({
  template: `
    <form *ngIf="form" [formGroup]="form" (submit)="editName($event)">
      <div class="form-group">
        <label for="nameInput">Name</label>
        <input formControlName="name" type="name" class="form-control" id="nameInput"> 
      </div>
      <button type="submit" class="btn btn-primary">Save changes</button>
    </form>
  `
})
export class YourComponent implements OnInit {
  form: FormGroup;

  ngOnInit(): void {
    this.form = new FormGroup({
      name: new FormControl(localStorage.getItem('user_name')),
    });
  }
}

Подробнее о реактивных формах в Angular см .: https://angular.io/guide/reactive-forms

Answer 2

Страница TS

1. переменная инициализации username:string;

2. создание функции для переменной заполнения из localstorage

getName(){ this.username = localStorage.getItem("user_name"; }

переменная вызова при загрузке страницы

onInit(){ this.getName(); }

HTML-страница

<input type="name" class="form-control" id="nameInput" value="{{username}}">

Answer 3

В конце концов, я создал метод с именем getUsername () в component.ts:

getUsername() {
  return localStorage.getItem('user_name');
}

, а затем привязал его к входу, используя следующее:

<input type="name" class="form-control" id="nameInput" value="{{getUsername()}}">