我们如何从 spring 引导控制器重定向到所需的 angular 页面(路由页面) - angular 集成在 spring 引导中
How can we redirect to required angular page (routing page) from spring boot controller - angular integrated inside spring boot
我已将 angular 应用程序集成到 spring 启动应用程序中。即 angular 构建文件放置在 spring 启动应用程序的静态文件夹中,如下图所示。
I have defined two angular routing urls like
1. http://localhost:8080/pageone
2. http://localhost:8080/pagetwo
当我从浏览器访问上面 urls
时,are handled by server
(spring 启动应用程序)直接和 not by the angular
。所以 I end up in page not found
.
We can redirect to index page
从 spring 这样引导
@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 一起发送,但它不起作用。
我们如何解决这个问题。
我找到了解决方案..
从浏览器访问以下网址
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";
}
}
索引页面将在 angular 自动加载请求的页面后调度,例如:'/pageone' 或 'pagetwo'
应用-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)
我已将 angular 应用程序集成到 spring 启动应用程序中。即 angular 构建文件放置在 spring 启动应用程序的静态文件夹中,如下图所示。
I have defined two angular routing urls like
1. http://localhost:8080/pageone
2. http://localhost:8080/pagetwo
当我从浏览器访问上面 urls
时,are handled by server
(spring 启动应用程序)直接和 not by the angular
。所以 I end up in page not found
.
We can redirect to index page
从 spring 这样引导
@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 一起发送,但它不起作用。 我们如何解决这个问题。
我找到了解决方案..
从浏览器访问以下网址
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";
}
}
索引页面将在 angular 自动加载请求的页面后调度,例如:'/pageone' 或 'pagetwo'
应用-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)