angular4+ 中动态路由的配置

Question

问题背景

项目首页需要支持PC端和pad端访问，PC端和PAD端的页面设计图相差太远，基本上没办法用@media搞定。

现在的情况

我设想的解决办法是：在module文件中配置路由时，判断当前的浏览器是否为pad浏览器，代码如下：

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

const routes: Routes = [];

// 如果是pad浏览器，那么默认就加载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),
    ],
   .... 
});

问题

在普通的开发模式下没有问题，AOT的过程中也没有问题，但是运行AOT之后的页面，结果页面一片白，查看了网页源代码，上面配置的2个组件都没有加载到页面中。Console中也没有任何错误，代码中的log方法正常调用。

so. 有人遇到过这样的需求或者场景吗？ 是如何解决的呢？

Answer 1

这块没深究，提供另一种方案，在组件内部动态修改路由配置：

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);
    }
}