Angular (6)视图按钮（click）函数将重定向到Laravel（5.5）后端视图。

11 浏览
0 Comments

Angular (6)视图按钮（click）函数将重定向到Laravel（5.5）后端视图。

我想在点击Angular前端按钮时，重定向到Laravel后端视图。我对Angular还很陌生。这是我想要做的，请帮帮我。

frontend.component.html

frontend.component.ts

   userDetailsEdit() {
    alert('正在工作');
    this.authService.goToBreweryBarBackend();
}

auth.service.ts

 goToBreweryBarBackend() {
              const accessToken = JSON.parse(localStorage.getItem('access_token'));
              headers.append('Content-Type', 'application/json');
              this.http.get(this.url.LaravelURL + 'api/goToBreweryBarBackend', { headers: new Headers({ 'Authorization': 'Bearer ' + accessToken }) });

api.php

Route::get('/goToBreweryBarBackend', ['uses' => 'Homecontroller@index']);

HomeController.php

public function index()
{
    return view('home');
}

0

1 答案

0 Comments

问题出现的原因是在Angular (6)的视图中，点击按钮触发了一个函数userDetailsEdit，该函数通过window.location.href将页面重定向到了Laravel (5.5)后端的视图http://localhost:8000/intro。

解决方法是通过在Angular (6)的组件中使用Angular的路由功能来实现页面重定向。具体步骤如下：

1. 首先，确保已经安装了@angular/router模块。如果没有安装，可以通过以下命令进行安装：

npm install @angular/router

2. 在Angular (6)的组件中，导入Router模块：

import { Router } from '@angular/router';

3. 在组件的构造函数中注入Router服务：

constructor(private router: Router) { }

4. 修改userDetailsEdit函数，使用Router的navigateByUrl方法进行页面重定向：

userDetailsEdit() {
    this.router.navigateByUrl('/intro');
}

通过以上步骤，就可以实现在Angular (6)的视图中点击按钮后通过Angular的路由功能实现页面重定向到Laravel (5.5)后端的视图。

0