我们如何从 Spring Boot 控制器重定向到所需的 Angular 页面(路由页面) - Angular 集成在 Spring Boot 内部

2024-03-27

I have integrated angular application inside spring boot application.. i.e. angular build files are placed inside static folder of spring boot application like following image. enter image description here

I have defined two angular routing urls like

 1. http://localhost:8080/pageone
 2. http://localhost:8080/pagetwo

当我访问上面时urls从浏览器,其中are handled by server(Spring Boot应用程序)直接和not by the angular. so I end up in page not found.

We can redirect to index page像这样从 Spring Boot 开始

@GetMapping("/")
public RedirectView welcome(RedirectAttributes attributes) {
    //attributes.addFlashAttribute("flashAttribute", "redirectWithRedirectView");
    //attributes.addAttribute("pageToRequest", "paymentoverview");
    return new RedirectView("index.html");
}

but we can only redirect to index.html page not to routing urls "/pageone" or "/pagetwo".

我不想最终进入索引页。

Somehow I wan't to end up in respective page that I accessed from browser automatically, 
even after redirect to index page also fine.

我尝试将属性与 index.html 一起发送,但它不起作用。 我们如何解决这个问题。


我找到了解决方案..

从浏览器访问以下网址

1. http://localhost:8080/pageone
2. http://localhost:8080/pagetwo

请求将直接到达 spring 控制器并由下面的控制器处理

@Controller // should not be @RestController
public class BaseController implements ErrorController { // implement ErrorController to handle 404 (error pages)

    // Always redirect to index.html page (only option)

    // Can handle all request (which end up in 404)
    @GetMapping("/error")
    public String error() {
        return "forward:/index.html";
    }

    // Specific request 
    @GetMapping("/pageone")
    public String pageone() {
        return "forward:/index.html";
    }

    // Specific request with pathvariable and requestparam
    @GetMapping("/pagetwo" + "/{id}")
    public String pagetwo(@PathVariable("id") String id,
                                  @RequestParam("param1") String param1,
                                  @RequestParam("param2") String param2 ) {
        // both pathvariable and requestparam will be sent to front end
        return "forward:/index.html";
    }
}

索引页面将在该角度自动加载请求的页面后调度,例如:'/pageone'或'pagetwo'

应用程序路由.modules.ts

const routes: Routes = [
  {
    path: 'pageone',
    component: PageOneComponent
  },
  {
    path: 'pagetwo/:id', // to handle pathvariables
    component: PageTwoComponent
  },
  {
    path: '**',
    component: HomeComponent
  }
  ]

您可以访问接收到的路径变量和请求参数,如下所示

PageTwoComponent.ts

  ngOnInit(): void {
    console.log(this.route.snapshot.paramMap.get('id')); // get pathparms
    this.route.queryParams.subscribe(params => { // get queryparams
      console.log(params['param1']);
      console.log(params['param2']);
  });
  }

简而言之,@Controller and implements ErrorController

@GetMapping("/error")
public String error() {
   return "forward:/index.html";
}

After that angular automatically load requested page (routing url)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

我们如何从 Spring Boot 控制器重定向到所需的 Angular 页面(路由页面) - Angular 集成在 Spring Boot 内部 的相关文章

随机推荐

  • Windows 安装程序中的主要与次要升级

    是否有任何理由不设置安装 以便始终完成主要升级并更改产品代码 我发现支持不同类型的安装需要更多代码 并且 修复 安装似乎通过重大升级更容易工作 而且需要安装的应用程序不是很大 因此不需要 服务包 或补丁安装程序 不会 如果您的应用程序很小并
  • 使用迭代器将数组划分为大小不等的部分

    我有一个数组 需要将其分为 3 元素子数组 我想用迭代器来做到这一点 但最终我迭代到了数组的末尾并出现段错误即使我没有取消引用迭代器 给定 auto foo 1 2 3 4 5 6 7 8 9 10 我正在做 auto bar cbegin
  • ef4 导致 Web 服务中的循环引用

    我有一个 Reason 对象 public class Reason public virtual long Id get set public virtual string Name get set public virtual Comp
  • php 中的 QR 码,无需使用现已弃用的 Google Charts API

    有谁知道有一个 PHP 类可以在您的服务器上生成二维码 而不是依赖现已弃用的 Google Charts API 该 API 并不总是存在 我还认为 如果在服务器上完成批量 QR 码生成将会更快 我还会考虑使用基于 JS 或 Jquery
  • HTML5 音频回调在 safari/iOS 上失败

    我构建了一个应用程序 旨在通过使用 结束 事件在第一个声音完成时播放每个声音 在我的初始版本中 每个声音都有自己的音频元素 结果如下 function play next audio speaker audio sounds i get 0
  • 如何应用多个 DSC 配置?

    这是我的例子 Config AllNodes NodeName localhost PSDscAllowPlainTextPassword True Configuration LocalAdmin Param String Node lo
  • Gnuplot:多个堆叠直方图,每组使用相同的键

    我正在尝试创建一个具有多个堆叠直方图的图 如示例 8here http gnuplot sourceforge net demo histograms html 但对于我的数据来说 每组都有相同的四个类别 如何更改颜色和键 以便每个堆叠列的
  • 我需要在 Cython 中使用 `nogil`

    我有一些 Cython 代码 我想尽快运行 我需要释放 GIL 才能执行此操作吗 假设我的代码与此类似 import numpy as np trivial definition just for illustration cdef dou
  • 是否有一个 jQuery 自动完成插件可以强制选择一个项目?

    There s 自动完成 http docs jquery com Plugins Autocomplete autocomplete 但它不会强制选择某个项目 我需要这样的东西 但它必须强制选择一个项目 然后才能 提交 它存在吗 您可以使
  • 更改VS2017默认新项目位置

    在 Visual Studio 2017 中创建新项目时是否可以更改默认路径 好的 我找到了操作方法 从 工具 gt 选项 gt 项目和解决方案 gt 位置 gt 项目位置 然后在其中输入自定义文件夹 老实说 我更喜欢 Qt Creator
  • 如何使用 dagger.android 将活动注入另一个类?

    我正在使用新的 dagger android 方法来注入活动 但我想知道如果你想注入该怎么办Activity去上课 也许是一个Navigator需要当前活动的类 package com abydos messenger ui import
  • 气流池使用的插槽大于插槽限制

    有三个传感器任务并使用相同的池 池 limit sensor 设置为1 但池限制不起作用 三个池一起运行 sensor wait SqlSensor task id sensor wait dag dag conn id dest data
  • 为什么npx每次都要安装webpack?

    我有一个与 webpack 捆绑在一起的 JavaScript 应用程序 根据文档 我使用此命令开始捆绑 npx webpack 每次我得到这个输出 npx installed 1 in 2 775s 我已经验证 webpack 命令存在于
  • 如何“填充”背景图片? [复制]

    这个问题在这里已经有答案了 I m making a website where I need to have a notable difference between fill and center background images M
  • 如何处理由于时区偏移转换而导致的 jodatime 非法瞬间

    我想设置jodaDateTime到今天凌晨 2 点 请参阅下面的示例代码 但我遇到了这个异常 Exception in thread main org joda time IllegalFieldValueException Value 2
  • Java 中使用 char 索引进行数组访问

    在网上看到Java编程练习的解释时 我发现了以下代码 int count new int 128 int length 0 for char c s toCharArray if count c 2 length 2 count c 0 我
  • 在Linux上卸载

    我是在 Linux 上编译和安装程序的新手 我理解常见的流程是 configure make make install 我想知道如果我在某个地方犯了错误或者出了问题 是否有某种方法可以 回滚 同意其他答案 我想澄清一下 如果我的理解是正确的
  • 填充现有 numpy 数组和创建新数组之间的性能差异

    在迭代算法中 多次使用大型 numpy 数组是很常见的 通常 每次迭代时都需要手动 重置 数组 填充现有数组 使用 nan 或 0 和创建新数组之间是否存在性能差异 如果是这样 为什么 答案取决于数组的大小 虽然分配新的内存区域需要几乎固定
  • 升级后“应用程序无法启动...配置不正确”?

    我在 Windows 应用程序中有一个项目 而不是在 VS2008 中 现在我将其转换为VS2010 当我想运行我的项目时 我收到以下消息 此应用程序无法启动 因为应用程序配置不正确 请检查清单文件是否存在可能的错误 如何运行我的应用程序
  • 我们如何从 Spring Boot 控制器重定向到所需的 Angular 页面(路由页面) - Angular 集成在 Spring Boot 内部

    I have integrated angular application inside spring boot application i e angular build files are placed inside static fo