英文:
Use '#' char in Angular routes path
问题
可以使用#在Angular中定义路由吗？
不是像这样：
const routes: Routes = [
{
path: 'home',
component: HomeComponent
}
];
而是像这样：
const routes: Routes = [
{
path: '#home',
component: HomeComponent
}
];
在这种情况下，如果以本地开发服务器为例，URL将是localhost:4200/#home，而不是localhost:4200/home。
我知道#通常用于片段标识，但我想在路由定义中使用它。
更新
使用#的用例是为了在不同的Web技术之间进行迁移并保留旧的URL。
英文:
Is it possible to define routes in Angular using #?
Instead of having:
const routes: Routes = [
{
path: 'home',
component: HomeComponent
}
];
to have it like
const routes: Routes = [
{
path: '#home',
component: HomeComponent
}
];
In this case, if it is to take local development server as example, the URL would be localhost:4200/#home instead of localhost:4200/home.
I know that # is used for fragments, but I'm trying to use it in route definition.
Update
The use case is to perform a migration between web technologies and preserve the old URLs.
答案1
得分: 1
这是不可能的，因为：
在这里阅读有关它的所有内容2。
最后一部分（链接开头的哈希部分）是一个片段。所以它跳转到网站上的一个书签，例如。您可以在Angular中设置这些内容：
changeFragment() {
this.router.navigate( [ '/home' ], { fragment: 'part' } )
}
这将看起来像：http://localhost:4200/home#part
我不知道这是否对您有所帮助。但就我所知，在哈希内部使用自定义名称在技术上是不可能的。
英文:
Then we talk the same. This is not possible, because:
Read all about it here.
The last part (part with hash at start of link) is a fragment. So it jump to a bookmark on a site as example. You can set this things in Angular:
changeFragment() {
this.router.navigate( [ '/home' ], { fragment: 'part' } )
}
This will look like: http://localhost:4200/home#part
I don't know will it helps you. But a custom name with hash inside is technically not possible as far as I know.
答案2
得分: 0
在app-routing.module.ts文件中，您可能希望创建一个通配路由，然后正确重定向它们 - 这样，如果路由不匹配，将其发送到一个组件，该组件可以移除#，然后调用Angular路由器以重定向到正确的字符串。确保在生成此组件时将其设置为standalone为true，您需要将RouterModule导入到该组件中。
这有点绕弯，但它可以正常工作并防止您收到301重定向错误。
我最初不理解您的问题。
在app-routing.module.ts文件中：
{ path: '**', loadChildren: () => import('yourcomponentpath/redirectComponent.component').then((c) => c.redirectComponent) }
在redirect-component.component.ts文件中：
constructor(private router: Router);
ngOnInit() {
const route = this.router.url[0];
this.reWrite(route);
}
function reWrite(routeName: string) {
const route = routeName;
const routeSliced = route.slice(1);
return this.router.navigate(routeSliced as any);
}
英文:
you might want to create a catch all route then redirect them properly - so that way if the route doesn't match send it to a component that can remove the # like so. then invoke the angular router to redirect to the proper string. make sure when you generate this component you generate it as standalone true, you will need to import the routerModule into that component.
this is kind of an ugly work around but it will work and prevent you from getting 301 redirect errors.
I originally did not understand your question.
on app-routing.module.ts
//make this your last line of your router, this will catch all routes that don't have a match, so that way you can keep the original hash then reroute it inside a component.
{path:'**', loadComponent:()=>import('yourcomponentpath/redirectComponent.component').then((c)=>c.redirectComponent)
on redirect-component.component.ts
constructor(private router:Router);
ngOnInit(){
const route = this.router.url[0];
this.reWrite(route)
}
function reWrite(routeName:string){
const route = routeName;
const routesliced = route.slice(1);
return this.router.navigate(routesliced as any)
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论