路由 Angular 8 与 CSHTML 页面集成答案

【问题标题】：Routing Angular 8 integrated with CSHTML page路由 Angular 8 与 CSHTML 页面集成
【发布时间】：2020-09-12 00:37:28
【问题描述】：

正如我在使用 ng build --deploy-url=~/LogisticAppUI/dist/ 然后从 dist 复制 的代码后在其 Index.cshtml 中集成了 HomeController Index.html 并将其粘贴到 Index.cshtml 中，下面是 Index.cshtml 的代码。

@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Color Admin</title>
    <base href="/">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
    <meta content="" name="description" />
    <meta content="" name="author" />

    <link rel="icon" type="image/x-icon" href="favicon.ico" />
</head>
<body detect-scroll (onScroll)="handleScroll($event)">
    <app>
        <!-- begin #page-loader -->
        <div id="page-loader" class="fade show"><span class="spinner"></span></div>
        <!-- end #page-loader -->
    </app>
    <script src="~/LogisticAppUI/dist/runtime.js" defer></script>
    <script src="~/LogisticAppUI/dist/polyfills-es5.js" nomodule defer></script>
    <script src="~/LogisticAppUI/dist/polyfills.js" defer></script>
    <script src="~/LogisticAppUI/dist/styles.js" defer></script>
    <script src="~/LogisticAppUI/dist/vendor.js" defer></script>
    <script src="~/LogisticAppUI/dist/main.js" defer></script>
</body>
</html>

现在页面工作正常，它按要求登录这里是我在单击员工成员后访问的页面的屏幕截图。
现在，如果我再次点击上面的 Url，它会显示这个。

据我所知，它正在尝试通过 Controller 名称访问，但它在 API 中不存在知道我只想在 Angular 内部访问它，如果我尝试再次点击 URL 而不是在 WebApi 中搜索它，它应该只在我用于 POST 和 GET 正常工作，如下所示。

StaffInfoAdd(_Staff: Staff,ProfilePicFile: File) {

        const fData = new FormData();
        fData.append('Id', _Staff.Id == null ? '' : _Staff.Id.toString());
        fData.append('FirstName', _Staff.FirstName);
        fData.append('SendEmail', _Staff.SendEmail.toString());
        fData.append('SendPhone', _Staff.SendPhone.toString());
        fData.append('Password', _Staff.Password);

        if(ProfilePicFile != null){
            fData.append('FileUpload', ProfilePicFile, ProfilePicFile.name);
        }
        const hdrs = new HttpHeaders().append('Content-Disposition', 'mulipart/form-data');
        this.http.post(HostedPathConst.HostedPath + `Staff/Register`, fData, {headers:hdrs})
            .subscribe(this.Success, this.Error);
        this.messageStaffSource.next(_Staff);        
    }

    GetStaff(): Promise<any> {
        const promise = this.http.get(HostedPathConst.HostedPath + `Staff/GetStaff`).toPromise();
        return promise;
    }

当我在 Visual Studio Code 中独立使用 Angular 8 但当我将它与 Visual Studio 2019 with API 集成时，这工作正常点击 Url 时开始搜索 Controller 名称。

【问题讨论】：

标签： angular asp.net-web-api angular8 asp.net-web-api-routing

【解决方案1】：

您好，我认为您需要在 app-routing.module.ts 中添加 useHash: true 它应该类似于下面的代码。

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

【讨论】：

感谢它的工作，但我如何在取消我使用了#/StaffMembers，但它不起作用。
像这样使用 routerLink 取消成功了