角不路由到所需的页面 [英] Angular not routing to desired page

问题描述

我遇到问题是登录后看到仪表板页面.谁能告诉我我在做什么错.预先感谢！

I am having an issue is seeing the dashboard page after login. Can anyone please tell what I am doing wrong. Thanks in advance!

登录后，我看到的网址为 http://localhost:8080/home .它从不调用DashboardController.java中的方法

After I login, I see the url as http://localhost:8080/home. It never calls the method in DashboardController.java

app-routing.module.ts

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

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

DashboardController.java

@RestController
public class DashboardController {

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

推荐答案

感谢共享代码，app.component.html缺少，导致路由无法正常工作.使用此链接即可查看完整提交.

Thanks for sharing the code, the app.component.html was missing the which caused the routing not to work. Use this link to see the full commit.

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

changes in app.component.html, include

<router-outlet></router-outlet>

添加一个新的Home组件，以便可以路由到/home.

Add a new Home component so that routes to /home will work.

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

使用完整路径 http://localhost:8080/api/dashboard 进行调用Spring应用程序中的DashboardController.

Use the full path http://localhost:8080/api/dashboard to make calls to the DashboardController in Spring application.

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

这篇关于角不路由到所需的页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！