如何解决Angular中的路线重复
我正在尝试导航。我想要的是访问仅使用以下方法创建的视图:
http:// localhost:3000 / template / create
我所做的工作正常,但我也意识到此链接
http:// localhost:3000 / create
允许我导航创建视图。
我有一个app-routing.module
连接路线
import { NgModule } from '@angular/core';
import { Routes,RouterModule } from '@angular/router';
import { FormComponent } from "./form/form.component";
import { HomeComponent } from "./home/home.component";
const routes: Routes = [
{ path: 'home',component: HomeComponent },{ path: 'form',component: FormComponent },{ path: 'templates',loadChildren: () => import('./template-builder/template-builder.module').then(m => m.TemplateModule) }
];
@NgModule({
imports: [
RouterModule.forRoot(routes),],exports: [RouterModule]
})
export class AppRoutingModule { }
然后在导入模板构建器的路由中,我有一个template-builder.routing.module.ts
import { NgModule } from '@angular/core';
import { Routes,RouterModule } from '@angular/router';
import { CreateComponent } from './create/create.component';
import { TemplateComponent } from './template/template.component';
const routes: Routes = [
{ path: 'create',component: CreateComponent},{ path: '',component: TemplateComponent},];
@NgModule({
imports: [
RouterModule.forChild(routes),exports: [RouterModule]
})
export class TemplateRoutingModule { }
在template.componet.ts
我有
import { Component,OnInit } from '@angular/core';
@Component({
selector: 'app-template',templateUrl: './template.component.html',styleUrls: ['./template.component.css']
})
export class TemplateComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
还有create.component.ts
import { TemplateBuilderService } from '../template-builder.service';
@Component({
selector: 'app-template-builder',templateUrl: './create.component.html',styleUrls: ['./create.component.css']
})
export class CreateComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
解决方法
像这样更改template-builder.routing.module.ts
import { NgModule } from '@angular/core';
import { Routes,RouterModule } from '@angular/router';
import { CreateComponent } from './create/create.component';
import { TemplateComponent } from './template/template.component';
const routes: Routes = [
{
path: '',component: TemplateComponent,children: [
{
path: 'create',component: CreateComponent
},]
}
];
@NgModule({
imports: [
RouterModule.forChild(routes),],exports: [RouterModule]
})
export class TemplateRoutingModule { }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。