angular 版面配置策略

angular routing

Zaku 2018-09-11 16:17:31 ‧ 1826 瀏覽

分享至

簡要的配置大概會是這樣:

<app-header></appheader>
<router-outlet></router-outlet>
<app-footer></app-footer>

可能還會有側邊欄位等等分布，這些互動會投射到router-outlet，帶如果發生404無法辨識頁面的時候滿尷尬的，就變成類似

<app-header></appheader>
<app-404></app-404>
<app-footer></app-footer>

這樣應該是不太好

如果改成僅放
<router-outlet></router-outlet>

那進入後每一層都要再包，會類似下面那樣

//不是都在同一頁單純視意圖
//某頁面一
<app-header></appheader>
<app-content></app-content>
<app-footer></app-footer>
//某頁面二
<app-header></appheader>
<app-item></app-item>
<app-footer></app-footer>
//某頁面三
<app-header></appheader>
<app-work</app-work>
<app-footer></app-footer>

若只有三個結構還好，結構複雜的話好像不好管理，不知各位都怎麼設置版面

看更多先前的討論...收起先前的討論...

watercool iT邦新手 5 級 ‧ 2018-09-12 12:32:55 檢舉

我沒寫過angular，但是會用VUE，感覺大同小異，如有錯誤請鞭小力一點。給定<router-outlet>後，每次更改路由只會將<router-outlet>替換成你要求的component對吧?這樣應該可以直接在router設定好要顯示的頁面，就不用每一層去包了，404的話就加上以下route，應該就可以達成你的要求?
{path: '**', redirectTo: '/404'}

Zaku iT邦新手 3 級 ‧ 2018-09-12 16:41:59 檢舉

恩目前就是redirectTo: '/404'但他投射到哪裡要看根部結構，要是<head><outlet><footer>，就是會變成<head><404><footer>。要是是<outlet>就會是<404>，比較適當，但就是要改包法，如上面所說的問題，比較雜一點，不能最外層就包好一些結構

watercool iT邦新手 5 級 ‧ 2018-09-13 16:25:00 檢舉

跟你確認一下你的需求，一般情況下你希望頁面是
<app-header></appheader>
<router-outlet></router-outlet>
<app-footer></app-footer>
但404的時候希望
<404>

假設是這樣的需求的話，我有個很笨的想法
把404設絕對位置top、left都是零，長寬都100%，z-index社大一點，讓他浮在最上面，其實就是用一個404的modal去蓋掉主頁面的概念XD

Zaku iT邦新手 3 級 ‧ 2018-09-13 21:26:08 檢舉

這個我已經想過了(汗），但想看一下大家都怎麼設計的

watercool iT邦新手 5 級 ‧ 2018-09-14 07:18:28 檢舉

我想到了
第一頁
<router-outlet>
第二頁
app-header
router-outlet
app-footee

404頁面
<404>

路由的話一般頁面設一個父路由到<第二頁>，以及一個子路由到你希望的app-content頁面
404頁面就直接redirect到<404>

這樣應該可以符合你的需求，也不用每一頁都自己code結構

PS.手機回覆的，所以有些東西省略了很多符號，希望你看得懂