英文:
Angular RouterLink breaks the whole Layout
问题
我已经构建了一个具有约8个页面和完全功能的路由的Angular应用程序。
现在在另一台机器上，我在设置路由时遇到了问题，我看不到我的错误。
在创建应用程序时，我启用了路由，因此Angular已经创建了AppRoutingModule并将其导入AppModule。
在定义一些简单的路由之后，仍然不起作用。
app.component.html:
<router-outlet></router-outlet>
app-routing.module.ts:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TestComponent } from './test/test.component';
const routes: Routes = [
{ path: 'test', component: TestComponent },
{ path: '', redirectTo: 'test' },
{ path: '**', redirectTo: 'test' }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
这些代码会显示一个空白屏幕。
当将app.component.html的内容更改为以下内容时：
<app-test></app-test>
一切都正常：
test.component.html:
<div class="flex">
<div class="item i-1">Flex Item 1</div>
<div class="item i-2">Flex Item 2</div>
</div>
与以下样式一起使用：
.flex {
display: flex;
height: 100vh;
width: 100vw;
}
.item {
flex: 1;
text-align: center;
}
.i-1 {
background-color: aqua;
}
.i-2 {
background-color: greenyellow;
}
但现在是我在标题中提到的问题：
当我在HTML中提供routerLink时，页面会中断：
<div class="flex">
<div routerLink="test" class="item i-1">Flex Item 1</div>
<div class="item i-2">Flex Item 2</div>
</div>
routerLink-div中的文本和第二个flex-box项目都不会呈现。
我会认为这些问题是相关的，但除了定义所需的路由之外，还有什么其他事情要做？
我尝试将所有路由逻辑移到app-module中，这在我的其他项目中对我有效，但没有改变任何东西。
我遵循了官方Angular文档提供的步骤：https://angular.io/guide/router
英文:
I already built an Angular-App with ~8 Pages and fully functional Routing.
Now on another machine, I struggle to set up routing again and I don't see my error.
I activated routing when creating the app, so angular already created the AppRoutingModule and imported it in the AppModule.
After defining some simple routes, this is still not working.
app.component.html:
<router-outlet></router-outlet>
app-routing.module.ts:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TestComponent } from './test/test.component';
const routes: Routes = [
{path: 'test', component: TestComponent},
{path: '', redirectTo: 'test'},
{path: '**', redirectTo: 'test'}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
This somehow shows an empty, white screen.
When exchanging the content of the app.component.html to this:
<app-test></app-test>
everything is fine:
The test.component.html:
<div class="flex">
<div class="item i-1">Flex Item 1</div>
<div class="item i-2">Flex Item 2</div>
</div>
which following styling:
.flex {
display: flex;
height: 100vh;
width: 100vw;
}
.item {
flex: 1;
text-align: center;
}
.i-1 {
background-color: aqua;
}
.i-2 {
background-color: greenyellow;
}
But now the problem to which I referred in the title:
When I provide a routerLink in the html, the page breaks:
<div class="flex">
<div routerLink="test" class="item i-1">Flex Item 1</div>
<div class="item i-2">Flex Item 2</div>
</div>
Neither the text in the routerLink-div, nor the second flex-box-item is rendering.
I would assume that these problems are connected, but what else is there to do, other than defining the needed routes?
I tried moving all the routing-logic to the app-module which is working for me in my other project, but it changed nothing.
I followed the steps provided by the official angular documentation: https://angular.io/guide/router
答案1
得分: 1
This is due to the default route missing an argument:
Changing
{path: '', redirectTo: 'test'}
to
{path: '', redirectTo: 'test', pathMatch: 'full'}
resolves the routes and also the routerLink issue.
(I somehow missed the console errors while testing)
英文:
This is due to the default route missing an argument:
Changing
{path: '', redirectTo: 'test'}
to
{path: '', redirectTo: 'test', patchMatch: 'full'}
resolves the routes and also the routerLink issue.
(I somehow missed the console errors while testing)
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论