Question

我想在Angular的会话存储/本地存储中保存电话号码和邮件ID。我已经编写了收集详细信息的代码。但是我不知道下一步。

    <h2>Welcome User!!!</h2>
<form class="container" action="/product">
    <div>
        <label for="mail"><b>Email-ID: [(ngModel)]</b></label>
        <input type="text" placeholder="Enter mail ID" name="mail" required>
        <label for="psw"><b>Phone Number</b></label>
        <input type="text" placeholder="Enter Phone Number" name="phoneNumber" required>

        <button (click)="myFunc()">NEXT</button>
    </div>
</form>

//单击按钮时，我必须保存信息并移至下一页。当我回来时，它应该可用。请帮忙

我的Typescript文件如下：

import { Component, NgModule, OnInit } from '@angular/core';
import { Router, RouterModule, Routes } from '@angular/router';
import { MyProductPageComponent } from '../my-product-page/my-product-page.component';


@Component({
  selector: 'app-my-home-page',
  templateUrl: './my-home-page.component.html',
  styleUrls: ['./my-home-page.component.css']
})

export class MyHomePageComponent implements OnInit {

  constructor(private router: Router) {
  }

  ngOnInit(): void {
  }

  myFunc() {
    localStorage.setItem("phoneNumber", phoneNumber);
    localStorage.setItem("mail", mailID);
    this.router.navigate(['/products']);
  }
}

const routes: Routes = [
  { path: 'MyProductPageComponent', component: MyProductPageComponent },
]

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

Answer 1

有几种方法可以完成您要问的事情。我将按照您的指导尽量减少更改，但建议您阅读有关如何开发Angular表单的信息。

将模板引用变量添加到输入元素#email和#phone中，以便它们的值可以与与单击处理程序(click)="saveForm(email.value, phone.value)"关联的功能一起使用。我从myFunc()重命名了。存储的电子邮件值显示为{{mailID}}。

<h2>Welcome User!!!</h2>
<form class="container" action="/product">
    <div>
        <label for="mail"><b>Email-ID: {{mailID}}</b></label>
        <input type="text" placeholder="Enter mail ID" name="mail" required #email>
    <br>
        <label for="psw"><b>Phone Number</b></label>
        <input type="text" placeholder="Enter Phone Number" name="phoneNumber" required #phone>

        <button (click)="saveForm(email.value, phone.value)">NEXT</button>
    </div>
</form>

在组件类中，使用模板点击处理程序保存表单，其中包含电子邮件和电话值，如saveForm(email, phone)方法所示。保存表单并初始化组件后，将调用getSavedForm()以返回localStorage中的值，或者如果没有保存的值，则设置一个空字符串''。

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  phoneNumber: string;
  mailID: string;

  ngOnInit(): void {
    this.getSavedForm();
  }

  saveForm(email, phone) {
    localStorage.setItem("phoneNumber", phone);
    localStorage.setItem("mailID", email);
    this.getSavedForm();
  }

  getSavedForm() {
    this.phoneNumber = localStorage.getItem("phoneNumber") || '';
    this.mailID = localStorage.getItem("mailID") || '';
  }

}

这里是工作中的stackblitz demo。

如果您打算做更多的事情，我强烈建议您深入研究Angular的表单功能，因为当前的方法并非最理想。有关使用模板驱动或反应形式的更多信息，请参见Introduction to forms in Angular。

本地存储/会话存储/ Cookie

1 个答案: