Angular不会路由到所需的页面

时间:2018-03-27 14:39:43

标签: angular spring-boot

我遇到的问题是登录后看到仪表板页面。任何人都可以告诉我我做错了什么。提前谢谢!

登录后,我将网址视为http://localhost:8080/home。它从不在DashboardController.java中调用该方法

APP-routing.module.ts

import {DashboardComponent} from "./dashboard/dashboard.component";
const routes: Routes = [
    { path: '', redirectTo: '/home', pathMatch: 'full' },
    { path: 'dashboard', redirectTo: '/home', pathMatch: 'full' },
    {
        path: 'home',
        component: DashboardComponent,
        data: { title: 'Dashboard' }
    }
];

dashboard.component.ts

@Component({
    selector: 'dashboard-component',
    templateUrl: './dashboard.component.html',
    styleUrls: ['./dashboard.component.css'],
})

export class DashboardComponent implements OnInit {
    private currentAssociate: Associate;

    constructor(private http: Http,
                private router: Router) {
    }

    ngOnInit(): void {
        // initialize services and data
        this.http
            .get('api/dashboard')
            .toPromise()
            .then(response => {
                let data = response.json();

                if (data.currentAssociate) this.currentAssociate = data.currentAssociate as Associate;
            })
            .catch(error => {
                //alert("Error...");
             //   this.alertService.error(error);
            });

    }
}

DashboardController.java

@RestController
public class DashboardController {

    @RequestMapping(value = "/api/dashboard", method = RequestMethod.GET)
    public String init(){
        System.out.println(">>>>>>>>>>>>>>>>>>>>>>Dashboard - init()");
        return "dashboard_init";
    }
}

1 个答案:

答案 0 :(得分:1)

感谢您分享代码,app.component.html错过了导致路由无法正常工作的问题。使用此link查看完整提交。

app.component.html中的更改,包括

<router-outlet></router-outlet>

添加一个新的Home组件,以便到/ home的路由可以正常工作。

const routes: Routes = [
    { path: '', redirectTo: '/home', pathMatch: 'full' },
    {
        path: 'home',
        component: HomeComponent
    },
    {
        path: 'dashboard',
        component: DashboardComponent
    }
];

使用完整路径http://localhost:8080/api/dashboard在Spring应用程序中调用DashboardController。

this.http
    .get('http://localhost:8080/api/dashboard')              
    .toPromise()