Question

我正在尝试根据URL中的子域在Angular2路由器中路由。例如，如果有人请求test.domain.com，那么他们会得到＆＃34; test＆＃34;路线。我没有设置router.navigate从ngOnInit工作而不设置超时延迟，但从构造函数运行以下工作。如果有更清洁的解决方案，会有兴趣吗？

{path: 'test',                    component: TestComponent}

this._router.events.subscribe(event => {
 if (event.constructor.name === 'NavigationEnd'
     && window.location.hostname == 'test.domain.com'
     && event.url == '/') {
       console.log(event.url);
       this._router.navigate(['test']);
     }
 });

Answer 1

您不能通过Nginx或域代理或Ingres等来执行此操作。

为解决这种情况，您可以使用不同的全局路由，并在当前域已加载代码束的情况下将它们插入到routingModule中：

您将用重复的代码，双重应用程序解决问题，而仅用一个应用程序中的现有组件进行另一种路由模型。

// app.routing.ts

const TEST_routes: Routes = [
  {
    path: '',
    component: TestPageComponent,
  },
];

const PROJECT_routes: Routes = [
  {
    /// all needed routes of the whole main project
  },
];

const isCurrentDomainTest: boolean =
(window.location.hostname === 'test.localhost') || // local
(window.location.hostname === 'test.yourdomain.com'); // prod

 imports: [
   RouterModule.forRoot(
    isCurrentDomainTest ? TEST_routes : PROJECT_routes)
]

Answer 2

您可以使用 setTimeout ，如下所示

ngOnInit() {
    if (window.location.hostname == 'test.domain.com'){
      console.log(window.location.hostname);

      setTimeout(()=>{
         this._router.navigate(['test']);
      },2000)


    }
};

Answer 3

您可以使用警卫来阻止导航或重定向到其他路径。与您的示例类似：

@Injectable()
export class RedirectGuard implements CanActivate {

    constructor(router:Router){}

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
        // check if need redirect
        if (...) {
            console.log(`requested url: ${state.url}`);
            this.router.navigate(['/test']);
            return false;
        }
        return true;
    }
}

要应用防护，您应将其添加到模块提供程序并配置Route：

[{
    path: '',
    component: YourComponent,
    canActivate: [RedirectGuard],  
    children... 
},
{
    path: 'test',
    component: YourTestComponent,
    children...
},
...
]

https://angular.io/docs/ts/latest/guide/router.html#!#can-activate-guard

此外，我认为您可以使用不同的 base href 配置您的应用程序：

let useTestSubdomain: boolean = window.location.hostname == 'test.domain.com';

@NgModule({
  providers: [{provide: APP_BASE_HREF, useValue: useTestSubdomain ? '/test' : '/'}]
})
class AppModule {}

https://angular.io/docs/ts/latest/api/common/index/APP_BASE_HREF-let.html

Angular2基于子域的路由？

3 个答案: