Question

我正在尝试向UI-Router添加子域支持。想象一下使用自定义属性“domain”的这些路线：

{ name: 'mainhome', url: '/', domain: 'example.com', component: 'MainSiteComponent' },
{ name: 'bloghome', url: '/', domain: 'me.example.com',
component: 'BlogComponent' },

注意：两条路线都有相同的路线网址

我正在尝试根据当前域 AND 自定义域属性，通过uiSref指令更改href的生成。

有效路线应根据当前域确定为“mainhome”或“bloghome”。

访问 http://example.com/ 时：

<a uiSref="mainhome">变为<a href="/">

<a uiSref="bloghome">变为<a href="http://me.example.com/">

访问 http://me.example.com/ 时：

<a uiSref="mainhome">变为<a href="http://example.com/">

<a uiSref="bloghome">变为<a href="/">

我真的很感激有关此事的任何帮助！

Answer 1

ui-router用于操作URL的路径部分而不是主机名，因此您最好的选择可能是构建2个独立的应用程序。

您可以使用转换挂钩来控制应用移动到的下一个状态，您可以使用它来捕获下一个转换，如果它来自不同的域，您可以将浏览器位置更改为此域。

TLDR;有一个plunker sample基于ui-router hello-world

首先让我们定义状态：

const states = [
    { name: 'mainhome', url: '/', host: 'example.com', component: 'MainSiteComponent' },
    { name: 'bloghome', url: '/', host: 'me.example.com', component: 'BlogComponent' },
]

让我们定义一个onStart转换钩子，它将在对新状态进行任何转换之前调用，并检查下一个状态是否有与当前主机不同的主机。

function uiRouterConfigFn(router: UIRouter, injector: Injector) {
    router.transitionService.onStart({to: "*"}, function($transition) {
         const nextState = $transition.to();
         const host = window.location.host;
         if (nextState && nextState.host && nextState.host !== host) {
             window.location = `${window.location.protocol}://${nextState.host}/${nextState.url}`;
        }
    });
}

最后使用config来调用我们的配置函数：

@NgModule({
    imports: [ 
        ...,
        UIRouterModule.forRoot({ states: states, config: uiRouterConfigFn })
   ],
   ...
})
class RootAppModule {}

如何更改UI-Router for Angular 2中的href生成？

1 个答案: