Question

是否有人可以帮助我了解如何将Angular状态重定向到新URL，其查询字符串参数与旧URL相同？

示例

如果我的Angular应用程序位于http://example.com，则应将http://example.com/dashboard?id=123&view=test的所有请求重定向到http://test.com/dashboard?id=123&view=test。

我应该如何使用以下代码定义我的状态？

.state('dashboard', { 
    url: 'domain.com/dashboard', 
    controller: 'DashboardCtrl' 
})

我知道将状态转移到控制器然后从那里处理它的技巧很少。但我想知道是否有办法通过路由器重定向它只是为了避免在不同的控制器中重复代码？

Answer 1

：一种。 Angular 1

<强> 1。 main.route.js：

.state('stateName', {
  url: 'dashboard',
  controller: ['$location', '$window', function ($location, $window) {
    var url = 'domainB.com';
    url += $location.$$url;
    $window.location.href = url;
  }]
})

<强> B中。 Angular2 / 4

<强> 1。 app.module.ts ：声明自定义提供程序，如：

@NgModule({
  providers: [
    {
      provide: 'externalUrlResolver',
      useValue: (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
        window.location.href = `${route.data.externalUrl}${state.url}`;
      }
    }
  ]
})

<强> 2。 app-routing.module.ts ：现在使用自定义提供程序，我们可以在外部重定向。

const APP_ROUTES: Routes = [
  { path: 'dashboard', component: AnyComponent,
    pathMatch: 'prefix',
    resolve: { url: 'externalUrlResolver' },
    data: { externalUrl: 'domainB.com'}
  }
]

<强>输入

http://domainA.com/dashboard?view=list&id=123&visible=yes

这将重定向到：

http://domainB.com/dashboard?view=list&id=123&visible=yes

Answer 2

我认为最好的解决方案不是在Angular中 - 在代码加载后在浏览器中运行 - 而是在服务器上。如果您使用的是Apache，请添加.htaccess规则，将example.com的所有请求重定向到test.com。

创建一个名为.htaccess的文件并将其放在应用程序根目录中：

Options +FollowSymLinks
RewriteEngine On
RewriteBase /
RewriteCond %{HTTP_HOST} ^example\.com$ [NC]
RewriteRule ^(.*)$ http://test.com/$1 [R=302,L]

如果您希望重定向是永久性的（意味着浏览器和搜索引擎会记住并且不会打扰转到旧域），请将302更改为301

如果这不是解决方案，您可以使用CanActivateChild guard来指示在路由加载之前应该运行的代码。将其添加到基本路由的路由配置中，此代码将始终在组件等...初始化之前运行。在其中，您可以阅读当前路线并使用标准JavaScript将用户重定向到新域。

使用查询字符串在新服务器上重定向的角度路由

2 个答案: