我们如何从弹簧引导控制器重定向到所需的角度页面（路由页面） - 角度集成在弹簧引导中答案

【问题标题】：How can we redirect to required angular page (routing page) from spring boot controller - angular integrated inside spring boot我们如何从弹簧引导控制器重定向到所需的角度页面（路由页面） - 角度集成在弹簧引导中
【发布时间】：2022-01-02 02:36:27
【问题描述】：

我在 Spring Boot 应用程序中集成了 Angular 应用程序。即，Angular 构建文件放置在 Spring Boot 应用程序的静态文件夹中，如下图所示。

I have defined two angular routing urls like

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

当我从浏览器访问urls 以上时，are handled by server（弹簧启动应用程序）直接和not by the angular。所以I end up in page not found。

We can redirect to index page 来自这样的弹簧靴

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

but 我们可以only redirect to index.html 页面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 一起发送，但它不起作用。我们该如何解决这个问题。

【问题讨论】：

标签： angular spring-boot redirect angular-routing

【解决方案1】：

我找到了解决办法..

从浏览器访问以下网址

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'

app-routing.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 和 implements ErrorController

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

After that angular automatically load requested page (routing url)

【讨论】：