Angular RouterLink破坏整个布局。

huangapple
go评论99阅读模式
英文:

Angular RouterLink breaks the whole Layout

问题

我已经构建了一个具有约8个页面和完全功能的路由的Angular应用程序。

现在在另一台机器上，我在设置路由时遇到了问题，我看不到我的错误。

在创建应用程序时，我启用了路由，因此Angular已经创建了AppRoutingModule并将其导入AppModule。

在定义一些简单的路由之后，仍然不起作用。

app.component.html:

  1. <router-outlet></router-outlet>

app-routing.module.ts:

  1. import { NgModule } from '@angular/core';
  2. import { RouterModule, Routes } from '@angular/router';
  3. import { TestComponent } from './test/test.component';
  5. const routes: Routes = [
  6.   { path: 'test', component: TestComponent },
  7.   { path: '', redirectTo: 'test' },
  8.   { path: '**', redirectTo: 'test' }
  9. ];
  11. @NgModule({
  12.   imports: [RouterModule.forRoot(routes)],
  13.   exports: [RouterModule]
  14. })
  15. export class AppRoutingModule { }

这些代码会显示一个空白屏幕。

当将app.component.html的内容更改为以下内容时：

  1. <app-test></app-test>

一切都正常：

Angular RouterLink破坏整个布局。

test.component.html:

  1. <div class="flex">
  2.     <div class="item i-1">Flex Item 1</div>
  3.     <div class="item i-2">Flex Item 2</div>
  4. </div>

与以下样式一起使用：

  1. .flex {
  2.     display: flex;
  3.     height: 100vh;
  4.     width: 100vw;
  5. }
  7. .item {
  8.     flex: 1;
  9.     text-align: center;
  10. }
  12. .i-1 {
  13.     background-color: aqua;
  14. }
  16. .i-2 {
  17.     background-color: greenyellow;
  18. }

但现在是我在标题中提到的问题：
当我在HTML中提供routerLink时，页面会中断：

  1. <div class="flex">
  2.     <div routerLink="test" class="item i-1">Flex Item 1</div>
  3.     <div class="item i-2">Flex Item 2</div>
  4. </div>

Angular RouterLink破坏整个布局。

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:

  1. &lt;router-outlet&gt;&lt;/router-outlet&gt;

app-routing.module.ts:

  1. import { NgModule } from &#39;@angular/core&#39;;
  2. import { RouterModule, Routes } from &#39;@angular/router&#39;;
  3. import { TestComponent } from &#39;./test/test.component&#39;;
  5. const routes: Routes = [
  6.   {path: &#39;test&#39;, component: TestComponent},
  7.   {path: &#39;&#39;, redirectTo: &#39;test&#39;},
  8.   {path: &#39;**&#39;, redirectTo: &#39;test&#39;}
  9. ];
  11. @NgModule({
  12.   imports: [RouterModule.forRoot(routes)],
  13.   exports: [RouterModule]
  14. })
  15. export class AppRoutingModule { }

This somehow shows an empty, white screen.

When exchanging the content of the app.component.html to this:

  1. &lt;app-test&gt;&lt;/app-test&gt;

everything is fine:

Angular RouterLink破坏整个布局。

The test.component.html:

  1. &lt;div class=&quot;flex&quot;&gt;
  2.     &lt;div class=&quot;item i-1&quot;&gt;Flex Item 1&lt;/div&gt;
  3.     &lt;div class=&quot;item i-2&quot;&gt;Flex Item 2&lt;/div&gt;
  4. &lt;/div&gt;

which following styling:

  1. .flex {
  2.     display: flex;
  3.     height: 100vh;
  4.     width: 100vw;
  5. }
  7. .item {
  8.     flex: 1;
  9.     text-align: center;
  10. }
  12. .i-1 {
  13.     background-color: aqua;
  14. }
  16. .i-2 {
  17.     background-color: greenyellow;
  18. }

But now the problem to which I referred in the title:
When I provide a routerLink in the html, the page breaks:

  1. &lt;div class=&quot;flex&quot;&gt;
  2.     &lt;div routerLink=&quot;test&quot; class=&quot;item i-1&quot;&gt;Flex Item 1&lt;/div&gt;
  3.     &lt;div class=&quot;item i-2&quot;&gt;Flex Item 2&lt;/div&gt;
  4. &lt;/div&gt;

Angular RouterLink破坏整个布局。

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:

Angular RouterLink破坏整个布局。

Changing

  1. {path: &#39;&#39;, redirectTo: &#39;test&#39;}

to

  1. {path: &#39;&#39;, redirectTo: &#39;test&#39;, pathMatch: &#39;full&#39;}

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:

Angular RouterLink破坏整个布局。

Changing

  1. {path: &#39;&#39;, redirectTo: &#39;test&#39;}

to

  1. {path: &#39;&#39;, redirectTo: &#39;test&#39;, patchMatch: &#39;full&#39;}

resolves the routes and also the routerLink issue.

(I somehow missed the console errors while testing)

huangapple
  • 本文由 发表于 2023年2月18日 23:03:18
  • 转载请务必保留本文链接：https://go.coder-hub.com/75494206.html
  • angular
  • angular2-routing
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定