在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML5  HTML/ angular4+ 中動態(tài)路由的配置

angular4+ 中動態(tài)路由的配置

問題背景

項目首頁需要支持PC端和pad端訪問，PC端和PAD端的頁面設(shè)計圖相差太遠(yuǎn)，基本上沒辦法用@media搞定。

現(xiàn)在的情況

我設(shè)想的解決辦法是：在module文件中配置路由時，判斷當(dāng)前的瀏覽器是否為pad瀏覽器，代碼如下：

function isPad() {
    const ua = navigator.userAgent;
    return (ua.indexOf('Android') > 0 || ua.indexOf('iPhone') > 0 || ua.indexOf('iPad') > 0);
}

const routes: Routes = [];

// 如果是pad瀏覽器，那么默認(rèn)就加載Pad端首頁
if(isPad()) {
    routes.push({
        path: '',
        component: PadIndexComponent
    });
} else {
     // 加載PC端首頁
     routes.push({
        path: '',
        component: PcIndexComponent
    });
}

console.log('===>',routes);

@NgModule({
    imports: [
        CommonModule,
        HttpClientModule,
        RouterModule.forChild(routes),
    ],
   .... 
});

問題

在普通的開發(fā)模式下沒有問題，AOT的過程中也沒有問題，但是運(yùn)行AOT之后的頁面，結(jié)果頁面一片白，查看了網(wǎng)頁源代碼，上面配置的2個組件都沒有加載到頁面中。Console中也沒有任何錯誤，代碼中的log方法正常調(diào)用。

so. 有人遇到過這樣的需求或者場景嗎？ 是如何解決的呢？

回答
編輯回答
祉小皓

這塊沒深究，提供另一種方案，在組件內(nèi)部動態(tài)修改路由配置：

export class AppComponent {
    constructor(
        private router:Router
    ){
        //這是整個項目的路由配置
        let config = router.config
        //這里需要自己篩選
        if(this.isPad()){
            config[0].children.push({
                path:'',
                component: PadIndexComponent
            })
        }else{
            config[0].children.push({
                path:'child',
                component:PcIndexComponent
            })
        }
        this.router.resetConfig(config)
    }

    isPad() {
        const ua = navigator.userAgent;
        return (ua.indexOf('Android') > 0 || ua.indexOf('iPhone') > 0 || ua.indexOf('iPad') > 0);
    }
}
2018年2月27日 01:14