[Angular] 解決router做child route導致無窮迴圈

2018-05-23

1030
0

有些情況選單會很有多子項目，子項目下又有孫項目....一直下去

那在angular裡面就要設定router裡面再一個child router

有些小地方要注意，避免Angular判斷錯誤導致無窮迴圈！

app.Component.ts底下建立一個<router-outlet>到home.Component.ts功能面頁面

home.Component.ts底下還想要再來個<router-outlet>做子選項

首先，home.Component.html都長得一樣

<ul>
  <li><a routerLink='test1'>test1 </a></li>
  <li><a routerLink='test2'>test2 </a></li>
</ul>
<router-outlet></router-outlet>

再來設定app-routing.module.ts

1. 可以正常運作的router + child 運作如下：

const routes: Routes = [
  {
    path:'', 
    redirectTo: '/home', pathMatch: 'full'
  },
  {
    path: 'home',
    component: HomeComponent,
    children: [      
      {path: 'test1', component: Test1Component},
      {path: 'test2', component: Test2Component}
    ]
  }
]

結果圖

2. 會造成迴圈的設定如下：

const routes: Routes = [
  {
    path: 'home',
    component: HomeComponent,
    children: [      
      {path: 'test1', component: Test1Component},
      {path: 'test2', component: Test2Component},
    ],
    pathMatch: 'full' 
  }
]

結果圖

上方這樣子不管怎麼點test1、test他會不斷的append下去。

主要原因出在網址列，router會去網址列抓相對位置

一開始若只進入 127.0.0.1:/4200，router link會將超連結指向127.0.0.1:/4200/test1

但router parent層沒有宣告有test1，抓不到的結果就是一直往child找，形成無窮打牆的狀態...

上方成功是因為，會先將網址導向至127.0.0.1:/4200/home，那麼超連結指向127.0.0.1:/4200/home/test1

這樣就會先去找parent宣告有home，再去找child有test1

Angular

回首頁