Question

我已经设置好路由。当我登录我的应用程序时，导航会将我发送到正确的URL，但是没有任何变化。

而不是从登录屏幕更改为默认的“ my-comp作品”。它停留在同一页面上。

我在网上找不到任何答案

这是登录组件：

import { Component, OnInit } from '@angular/core';
import { LoginDetailes } from 'src/app/Entities/LoginDetailes';
import { LoginService } from 'src/app/services/login.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
public loggedin:boolean;
public loggedClient:string;
public errormessage:string;
public loginDetailes = new LoginDetailes();
  constructor(private loginservice:LoginService,private router:Router) { }

  ngOnInit() {
  this.loggedin=false;
  }
public onLogin():void{
  const observable=this.loginservice.login(this.loginDetailes);
  observable.subscribe((returnedLoginDetailes:LoginDetailes)=>{
    alert("Welcome "+this.loginDetailes.name);
    this.loggedin=true;

  if(this.loginDetailes.clientType=="ADMIN"){
    this.router.navigate(['/adminLay']);
  }
  else if(this.loginDetailes.clientType=="COMPANY"){
  this.router.navigate(['/login']);
  }
  else if(this.loginDetailes.clientType=="CUSTOMER"){
    this.router.navigate(['/login']);
  }else{
    alert("Wrong Login Detailes");  
  }

  }, err => {
  this.errormessage=err.console.error("Wrong Detailes please Check Again!");
  alert(this.errormessage);
}
  )}}

这是登录HTML：

<table>
    <label>Name</label>
  <tr>
    <input [(ngModel)]="loginDetailes.name" class="enjoy-css" type="text" placeholder="ID" >
  </tr>
  <label>Password</label>
  <tr>
    <input [(ngModel)]="loginDetailes.password" class="enjoy-css" type="password"  placeholder="Password">
  </tr>
  <tr>
   <select [(ngModel)]="loginDetailes.clientType">
     <option  value="ADMIN">ADMIN</option>
     <option  value="COMPANY">COMPANY</option>
     <option  value="CUSTOMER">CUSTOMER</option>
   </select>
  </tr>
  <tr>
    <input  type="button" (click)="onLogin()" value="Login" Router>

  </tr>
</table>

路由器模块：

const routes:Routes=[
{path:'login',component:LoginComponent},
{path: '',component:LoginComponent},
{path:'crtComp',component:CreateCompanyComponent},
{path:'adminLay',component:AdminLayoutComponent}
]
@NgModule({
exports:[RouterModule],
imports: [ RouterModule.forRoot(routes) ]
})
export class AppRoutingModule { }

我什么都没有

Answer 1

路由器模块

export const appRoutes: BaseRoutes = [
  {
    path: 'login', component: BlankTemplateComponent, isTemplate: true,
    children: [
      {
        path: '', component: LoginComponent, pathMatch: 'full'

      }
    ]
  },

];

@NgModule({
  imports: [RouterModule.forRoot(appRoutes, { useHash: true })],
  exports: [RouterModule]
})

export class AppRoutingModule {

}

应用模块

@NgModule({
  declarations: [

  ],
  imports: [
    RouterModule.forRoot(appRoutes, { useHash: true }),

  ],
  entryComponents: [BlockUiTemplateComponent],

  bootstrap: [AppComponent]
})
export class AppModule { }

最后一步的html文件应具有<router-outlet>

<div id="loading-wrapper" *ngIf="loading">
    <div id="loading-text">LOADING</div>
    <div id="loading-content"></div>
</div>
<router-outlet>
</router-outlet>

router-outlet是您重定向时将显示html的地方

上面的代码与您的代码不同，只是为您提供设置路由的示例

角度路由发送到正确的URL，但没有任何变化

1 个答案: