我正在尝试向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="/">
我真的很感激有关此事的任何帮助!
答案 0 :(得分:1)
您可以使用转换挂钩来控制应用移动到的下一个状态,您可以使用它来捕获下一个转换,如果它来自不同的域,您可以将浏览器位置更改为此域。
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 {}