重定向到 Angular 应用程序之外但在同一个域中的 URL答案

【问题标题】：Redirect to URL outside the Angular app but on the same domain重定向到 Angular 应用程序之外但在同一个域中的 URL
【发布时间】：2018-09-11 08:14:14
【问题描述】：

在 角度路由 中是否有任何方法可以重定向 到同一域上的外部目录。我有一个 WordPress 博客和 Angular 应用程序，我希望它使用相同的域而不是子域。

示例

http://example.com --> Angular 应用程序
http://example.com/blog --> Wordpress 博客

请帮我提出你的建议。

【问题讨论】：

我想到了2个解决方案，您可以将博客放在iframe中，或者让服务器将url重定向到博客而不是角度文件..
简单地重定向window.location.href = 'your_url'; ?
stackoverflow.com/questions/40150393/… 可能重复
@JacopoSciampi 使用外部 URL，而不是内部 URL
我也面临这个困难，window.location.href 在同一个域上重定向时不起作用。请指教？

标签： angular

【解决方案1】：

我理解您为什么要使用 Angular 路由器来执行此操作。从 Angular 应用程序导航到外部 url 非常简单。使用window.location 或锚标记很简单，但它有一个很大的缺点，它绕过了Angular 路由器。

@Adrian 提出了一种使用 Using the Angular Router to navigate to external links 内部编写的 Angular 路由器导航到外部 url 的好方法。我喜欢他的实现，它看起来干净且正确。他也在stackblitz准备了最终结果。

【讨论】：

我还没有机会实际尝试这个 impl，但我觉得这是实现它的最“正确”的方式，因为它不会绕过路由器。实际上，我根本没有考虑过路由守卫，但现在我有，毫无疑问我想继续使用路由器。 :)

【解决方案2】：

如果理解正确，它应该适用于基于内容类型的重定向。

解决方案：

根据域和路径重定向（301、302、303、307）到内部/外部页面或文件：

Github - TYPO3.UrlForwarding
见 - Full documentation

其他选项是以redirect.center 的 DNS 重定向为例。

最后也是最后，使用 WordPress 插件，乍一看似乎有很多选择。

更多信息请访问 - https://redirection.me

【讨论】：

【解决方案3】：

您可以简单地使用window.open(url, '_blank'); 它会打开新标签页，其中包含设置的网址

【讨论】：

【解决方案4】：

角度路由器旨在提供角度应用程序内的路由，并且没有固有的外部路由。

您可以路由到一个几乎为空的组件，该组件重定向到您的外部链接。这似乎是最简单的解决方案。

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { BlogComponent } from './blog/blog.component';    

const routes: Routes = [
  { path: 'blog', component: BlogComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

blog.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  template: ''
})
export class BlogComponent implements OnInit {
  ngOnInit(): void {
    window.location.href = 'http://example.com/blog';
  }
}

PS：确保您可以访问您的 wordpress 安装，而不会被您的服务器重定向到 Angular 应用程序。

【讨论】：

我认为问题是针对 angularjs1.x 提出的。
@pavinan 它已被标记为两者。这似乎有点奇怪，因为它们是互斥的标签。那就是说我不熟悉angularjs。因此，也许有人可以将此答案作为灵感或指出任何相似之处。

【解决方案5】：

我认为您可以使用重定向功能，如以下代码示例。

$routeProvider.when("/blog", {
  redirectTo: function () {
    window.location.href = window.location.origin + "/blog";
    // remove below line if it is not working.
    return "/some redirecting animation page";
  }
});

如果使用状态提供者。

var aboutState = {
  name: 'blog',
  url: '/blog',
  redirectTo: function () {
    window.location.href = window.location.origin + "/blog";
    // remove below line if it is not working.
    return "/some redirecting animation page";
  }
}

【讨论】：