角度未路由到所需页面答案

【问题标题】：Angular not routing to desired page角度未路由到所需页面
【发布时间】：2018-03-27 14:39:42
【问题描述】：

我在登录后看到仪表板页面时遇到问题。谁能告诉我我做错了什么。提前致谢！

登录后，我看到网址为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";
    }
}

【问题讨论】：

返回 "dashboard_init";您作为标志发送回客户端的响应是用于路由到仪表板页面吗？而且你路由到仪表板似乎是错误的。 { path: 'dashboard', redirectTo: '/home', pathMatch: 'full' },
@VikramPalakurthi：我认为 return "dashboard_init" 只是一个字符串。我可以返回一个对象、列表、json 等。我相信这与路由没有任何关系……我说的对吗？
没错，所以问题出在路由配置中，然后 { path: 'dashboard', redirectTo: '/home', pathMatch: 'full' } 如果你看到你将它重定向到这里访问仪表板页面。如果你纠正它，问题应该会消失。
你是说它应该是这样的：{ path: 'dashboard', redirectTo: '/dashboard', pathMatch: 'full' },
可以是 { path: 'dashboard', redirectTo: '/dashboard', pathMatch: 'full' } 或 { path: 'dashboard', component: DashboardComponent }

标签： angular spring-boot

【解决方案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()

【讨论】：