Angular 路由添加参数

Question

嗨，我有以下简单的 angular 12 proyect，带有登录页面和主页。代码如下： home.component.html

<div class="text-center" style="width: 100%">
    <h1>home</h1>
</div>

home.component.ts

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

@Component({
  selector: 'home',
  templateUrl: './home.component.html',
  styleUrls:['./home.component.css']
})
export class HomeComponent implements OnInit {
  
  constructor() { }
  
  ngOnInit(): void {
  }

}

login.component.html

<div class="text-center" style="width: 100%">
    <loginbox [clickLoginFunction]="login"></loginbox>
</div>

login.component.ts

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

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls:['./login.component.css']
})
export class LoginComponent implements OnInit {
  
  constructor( private router: Router) { }

  ngOnInit(): void {
  }

  login(): void {
    console.log("HOLA");
    this.router.navigate(['/home']);
  }
}

然后我有一个登录框组件：

loginbox.component.html

<div class="wrapper fadeInDown">
  <div id="formContent" >

    <!--
    <div class="fadeIn first">
      <img src="http://danielzawadzki.com/codepen/01/icon.svg" id="icon" alt="User Icon" />
    </div>
    -->
    <div class="m-3">
      <h1>WigStat</h1>
      <form>
        <div class="mt-3">
          <input type="text" id="login" class="fadeIn second" name="login" placeholder="username">
        </div>
        <div class="mt-3">
          <input type="text" id="password" class="fadeIn third" name="login" placeholder="password">
        </div>
        <div class="mt-3">
          <input type="submit" class="fadeIn fourth mt-4 mb-4" value="Log In" (click)="loginClick()">
        </div>
      </form>
    </div>

    <!--
    <div id="formFooter">
      <a class="underlineHover" href="#">Forgot Password?</a>
    </div>
    -->

  </div>
</div>

loginbox.component.ts

import { Component, Input, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import Swal from 'sweetalert2';

@Component({
  selector: 'loginbox',
  templateUrl: './loginbox.component.html',
  styleUrls:['./loginbox.component.css']
})
export class LoginBoxComponent implements OnInit {
  
  @Input()
  clickLoginFunction!: () => void;
  
  private emailOrUsername!: String;;
  private password!: String;

  constructor() {
   }
  
  ngOnInit(): void {
  }

  loginClick(){
    console.log("LLamada a la funcion interna del componente de login");
    console.log(this.emailOrUsername);
    console.log(this.password);
    
    if(this.emailOrUsername === undefined || this.emailOrUsername === ''){
      this.showErrorModelInRegister('No se han introducido usuario');
      return;
    } else if (this.password === undefined || this.password === ''){
      this.showErrorModelInRegister('No se ha introducido password');
      return;
    }
    this.clickLoginFunction();
  }

  private showErrorModelInRegister(message:string){
    Swal.fire(message);
  }
}

应用-routing.module.ts

import { LoginComponent } from './pages/login/login.component';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './pages/home/home.component';
import { MainComponent } from './pages/main/main.component';

const routes : Routes = [
  {path: 'home', component: HomeComponent},
  {path: 'login', component: LoginComponent},
  {path: '**', pathMatch: 'full', redirectTo: '/login'}
]

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

当我加载主页时，出现以下内容

到目前为止一切顺利，但如果我按下按钮登录：

我不是 angular 方面的专家，但我了解基础知识，但我找不到有关正在发生的事情的信息。

提前致谢

Answer 1

它的输出看起来很正常，你没有做任何验证，所以当你点击按钮时，你会得到 emailOrUsername 和 password 变量未定义的消息。

我在这里注意到的一件事是您必须对 emailOrUsername 和 password.

使用双向绑定

首先在您的 AppModule 中导入 FormsModule。


    <div class="m-3">
      <h1>WigStat</h1>
      <form>
        <div class="mt-3">
          <input [(ngModel)]="emailOrUsername" type="text" id="login" class="fadeIn second" name="login" placeholder="username">
        </div>
        <div class="mt-3">
          <input  [(ngModel)]="password" type="password" id="password" class="fadeIn third" name="login" placeholder="password">
        </div>
        <div class="mt-3">
          <input type="submit" class="fadeIn fourth mt-4 mb-4" value="Log In" (click)="loginClick()">
        </div>
      </form>
    </div>

现在您将获得用户 emailOrUsername 和 password 中的值。

Angular 路由添加参数

Angular routing adding parameters

angular

typescript

query-parameters

app-route