登錄后導航到主頁時出現問題。我有<app-header></app-header>帶有兩個鏈接的導航欄，一個用于注冊，另一個用于登錄。登錄后，我想導航到鏈接下的主頁http://localhost:4200。在login.component.ts中，我使用navigateByUrl()重定向并且導航作業正常，但我的主頁沒有呈現，只有空白頁。我意識到的一件事是當我<app-header></app-header>從app.component.html中洗掉我的主頁呈現時，但我失去了我的導航欄。問題出在哪里？如何在不擺脫導航欄的情況下呈現我的主頁？
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { SignupComponent } from './auth/signup/signup.component';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { LoginComponent } from './auth/login/login.component';
import { NgxWebstorageModule } from 'ngx-webstorage';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ToastrModule } from 'ngx-toastr';
import { TokenInterceptor } from './token-interceptor';
import { HomeComponent } from './home/home.component';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
@NgModule({
declarations: [
AppComponent,
HeaderComponent,
SignupComponent,
LoginComponent,
HomeComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
ReactiveFormsModule,
HttpClientModule,
NgxWebstorageModule.forRoot(),
BrowserAnimationsModule,
ToastrModule.forRoot(),
FontAwesomeModule,
],
providers: [
{
provide: HTTP_INTERCEPTORS,
useClass: TokenInterceptor,
multi: true
}
],
bootstrap: [AppComponent]
})
export class AppModule { }
應用程式路由.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './auth/login/login.component';
import { SignupComponent } from './auth/signup/signup.component';
import { HomeComponent } from './home/home.component';
const routes: Routes = [
{path:'', component: HomeComponent},
{path:'signup', component: SignupComponent},
{path:'login', component: LoginComponent},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
app.component.html
<app-header></app-header>
<router-outlet></router-outlet>
header.component.html
<header>
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
<div class="flex-grow-1">
<a aria-label="Home" class="logo" routerLink="/">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="reddit-icon-svg">
<g>
<circle fill="#FF4500" cx="10" cy="10" r="10"></circle>
<path fill="#FFF"
d="M16.67,10A1.46,1.46,0,0,0,14.2,9a7.12,7.12,0,0,0-3.85-1.23L11,4.65,13.14,5.1a1,1,0,1,0,.13-0.61L10.82,4a0.31,0.31,0,0,0-.37.24L9.71,7.71a7.14,7.14,0,0,0-3.9,1.23A1.46,1.46,0,1,0,4.2,11.33a2.87,2.87,0,0,0,0,.44c0,2.24,2.61,4.06,5.83,4.06s5.83-1.82,5.83-4.06a2.87,2.87,0,0,0,0-.44A1.46,1.46,0,0,0,16.67,10Zm-10,1a1,1,0,1,1,1,1A1,1,0,0,1,6.67,11Zm5.81,2.75a3.84,3.84,0,0,1-2.47.77,3.84,3.84,0,0,1-2.47-.77,0.27,0.27,0,0,1,.38-0.38A3.27,3.27,0,0,0,10,14a3.28,3.28,0,0,0,2.09-.61A0.27,0.27,0,1,1,12.48,13.79Zm-0.18-1.71a1,1,0,1,1,1-1A1,1,0,0,1,12.29,12.08Z">
</path>
</g>
</svg>
<span class="reddit-text">
Spring Reddit Clone
</span>
</a>
</div>
<div class="flex-grow-1 float-right">
<a routerLink="/signup" class="float-right sign-up mr-2">Sign up</a>
<a routerLink="/login" class="float-right login mr-2">Login</a>
</div>
</nav>
</header>
登錄組件.ts
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { AuthService } from '../auth.service';
import { LoginRequestPayload } from './login-request.payload';
import { ToastrService } from 'ngx-toastr';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
isError = false;
loginForm: FormGroup;
loginRequestPayload: LoginRequestPayload;
registerSuccessMessage:string;
constructor(private authService: AuthService, private activatedRoute: ActivatedRoute,
private router: Router, private toastr: ToastrService) {
this.loginForm = new FormGroup({
username: new FormControl('', Validators.required),
password: new FormControl('', Validators.required)
});
this.loginRequestPayload = {
username: "",
password: ""
}
this.registerSuccessMessage = "";
}
ngOnInit(): void {
this.activatedRoute.queryParams.subscribe(params =>{
if(params['registered'] !== undefined && params['registered'] === true){
this.toastr.success("Signup Successful");
this.registerSuccessMessage = "Please Check your inbox for activation email and activate your account before you login!"
}
})
}
login(){
this.loginRequestPayload.username = this.loginForm.get('username')?.value;
this.loginRequestPayload.password = this.loginForm.get('password')?.value;
const self = this;
this.authService.login(this.loginRequestPayload).subscribe({
next(response){
console.log(response);
},
complete(){
self.isError = false;
self.toastr.success('Login Successful');
self.router.navigateByUrl('');
},
error(){
console.group("Error");
self.isError = true;
}
})
}
}
uj5u.com熱心網友回復：
您需要更改此行
self.router.navigateByUrl('');
如果您的意圖是導航到根目錄并渲染 HomeComponent 應該是這樣的
self.router.navigateByUrl('/');
請記住，navigateByUrl()接收絕對路徑string。根的路徑'/'不是空的string。
uj5u.com熱心網友回復：
好的，我明白問題出在哪里了。在我的主頁中，我只有一個<h1>Home Page</h1>標簽，因此該頁面實際上已呈現，但 h1 標簽仍位于導航欄下方，因此我看不到它并決定不呈現該頁面。
uj5u.com熱心網友回復：
我也遇到了同樣的問題。我的代碼是：
this.router.navigate(["./do-list/" this.filter]);
但它沒有重新加載頁面。它只是重命名網址。我的解決方案是用 javascript 重新加載它。
window.location.reload();
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/482758.html
標籤：有角度的 打字稿 重定向 角度用户界面路由器 angular2路由