iT邦幫忙

0

angular 版面配置策略

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

<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邦新手 4 級 ‧ 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邦新手 4 級 ‧ 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.手機回覆的,所以有些東西省略了很多符號,希望你看得懂
Zaku iT邦新手 4 級 ‧ 2018-09-14 13:40:46 檢舉
恩恩,應該就類似我的第二個方法,就是要再多包第二層去,我在想想,因為頁面複雜的時候有點麻煩,感謝大大

尚未有邦友回答

立即登入回答