本地存儲/會話存儲

Question

我的Html文件如下：

<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" [(ngModel)]="mail" name="mail" required>
        <label for="psw"><b>Phone Number</b></label>
        <input type="text" placeholder="Enter Phone Number" [(ngModel)]="mail" name="phoneNumber" required>

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

我的打字稿文件如下：

   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 {
  phoneNumber = "";
  mailID = "";

  constructor(private router: Router) {
  }

  ngOnInit(): void {
  }

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

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

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

我想獲取在表單中輸入的電話號碼和郵件 ID 並將其保存在本地存儲中。 並重定向到下一頁。 請幫忙。 收到此錯誤：預期聲明。

Answer 1

您需要使用 ngmodel 將值與輸入控件綁定，並且您可以在組件中訪問它。

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

Answer 2

1. 將變量添加到.ts組件中的電話/郵件

2. this用於myFunc()中的變量以獲取變量的值

3. 使用ngModel將變量與用戶的輸入綁定（在輸入而非標簽上設置ngModel ）。

4. 使用import { NgModule } from '@angular/core'; 在app.module而不是在您的組件中

查看工作代碼

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

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


  phoneNumber = "";
  mailID = "";
  myFunc() {
    localStorage.setItem("phoneNumber", this.phoneNumber);
    localStorage.setItem("mail", this.mailID);
  }

Answer 3

        const routes: Routes = [
          { path: 'MyProductPageComponent', component: MyProductPageComponent },
        ]
        The path variable should not have a component  and you are using router.navigate('/products') 
       const routes: Routes = [
          { path: 'products', component: MyProductPageComponent },
        ]
These variables which are used in the ts should bind with the ngModel used in the template 
phoneNumber = "";
mailID = "";

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

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