要解决Angular路由在路径'blog/add'上不正常工作的问题,可以参考以下解决方法:
// app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { BlogAddComponent } from './blog-add/blog-add.component';
const routes: Routes = [
{ path: 'blog/add', component: BlogAddComponent },
// 其他路由配置...
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Add Blog
标记,用于显示路由组件。示例代码如下:
// auth.guard.ts
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { AuthService } from './auth.service';
@Injectable({
providedIn: 'root'
})
export class AuthGuard implements CanActivate {
constructor(private authService: AuthService, private router: Router) { }
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): boolean {
if (this.authService.isAuthenticated()) {
return true;
} else {
this.router.navigate(['/login']);
return false;
}
}
}
// app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { BlogAddComponent } from './blog-add/blog-add.component';
import { AuthGuard } from './auth.guard';
const routes: Routes = [
{ path: 'blog/add', component: BlogAddComponent, canActivate: [AuthGuard] },
// 其他路由配置...
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
通过上述解决方法,应该能够解决Angular路由在路径'blog/add'上不正常工作的问题。请根据实际情况调整代码,并确保路由配置和路由链接的准确性。
上一篇:Angular路由不显示组件