HashLocationsstrategy 在 Angular 6 应用程序中不起作用

Question

我正在开发 Angular 6 应用程序。我想在我的应用程序中使用 HashLocationstrategy。我的用户界面如下所示：

所以，现在当用户单击“链接子广告系列”时，我会将用户带到浏览器中的新选项卡以选择所需的子广告系列来绑定和发布链接，我将用户返回到我的 Angular 应用程序.现在，当将用户返回到我的应用程序时，我想用哈希返回用户。

例如：http://localhost:4200/#/campaign-details/2（必填格式） http://localhost:4200/campaign-details/2（我得到的实际格式）

这是我的 Component.html 的样子：

<div class=" text-center">
  <h3 *ngIf="!SubCampaign">{{SubCampaign}}</h3>

  <a href="http://localhost:64674/portal/Campaigns/Edit/{{CampaignId}}" target="_blank" *ngIf="SubCampaign == null" class="btn btn-outline-primary "> <i class="zmdi zmdi-link zmdi-hc-fw"></i>Link SubCampaign</a>

</div>

然后上面的链接会将他带到我的后端，这是一个 C#（Web API），我的控制器看起来像这样：

 public ActionResult Edit(int? id)
        {
            if (id == null)
            {
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }
            Campaign campaign = db.Campaigns.Find(id);
            var subcampaign = db.SubCampaigns.Select(x => new {x.Id , x.Name }).ToList();

            if (campaign == null)
            {
                return HttpNotFound();
            }

            var cId = db.Campaigns.Where(x => x.Id == id);
            ViewBag.cmapId = cId;

            ViewBag.CampaignName = campaign.Name;

            ViewBag.SubCampaigns_Id = new SelectList(subcampaign, "Id", "Name");

            ViewBag.Department_Id = new SelectList(db.Departments, "Id", "Name", campaign.Department_Id);
            ViewBag.BeneficiaryGroup_Id = new SelectList(db.BeneficiaryGroups, "Id", "Name", campaign.BeneficiaryGroup_Id);
            return View(campaign);
        }

上面的 sn-p 有一个视图 ( .cshtml ) 用于选择子活动。 注意：（此处未提及查看代码。）

上述代码的http Post方法如下：

 [HttpPost]

[ValidateAntiForgeryToken]

public ActionResult Edit([Bind(Include = "Id,Department_Id,Name,IsIVRCampaign,BeneficiaryGroup_Id,SubCampaigns_Id")] Linksubcampaign campaign)
        {
            if (ModelState.IsValid)
            {
                //db.Entry(campaign).State = EntityState.Modified;
                //db.SaveChanges();
                //return RedirectToAction("Index");
                var subcamp = db.SubCampaigns.Where(x => x.Id == campaign.SubCampaigns_Id).FirstOrDefault();

                subcamp.Campaign_Id = campaign.Id;
                db.SaveChanges();
                ViewBag.campId = campaign.Id;
                return View("ReturnUrl", new { CampaignId = ViewBag.campId });
            }

我将用户带到“RetrunUrl”操作方法，在该方法中我将用户带回 angular 6 应用程序。 RetrunUrl 操作方法控制器和查看页面 (.cshtml) 页面如下所示。

 public ActionResult ReturnUrl(int? CampaignId)
        {
            ViewBag.CampId = CampaignId;
            return View();
        }

<div class="hidden">
    <form action="http:localhost:4200/#/campaign-details/@ViewBag.CampId" method="post" id="returnForm">

        <input type="submit" />
    </form>
</div>
<script type="text/javascript">

    setTimeout(function () {
        $('form#returnForm').submit();
    }, 2000);

</script>

我的应用模块如下所示：

import { browser } from 'protractor';
import { CampaignDetailsComponent } from './campaign-details/campaign-details.component';
import { HttpClientModule } from '@angular/common/http';
import { CampaignService } from './../../services/campaign.service';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {RouterModule} from '@angular/router'
import { AppComponent } from './app.component';
import { HttpModule } from '@angular/http';
import { HomeComponent } from './home/home.component';
import { FormsModule } from '@angular/forms';
import { Ng2GoogleChartsModule } from 'ng2-google-charts';
import { CampaignHeaderComponent } from './campaign-header/campaign-header.component';
import { CountToModule } from 'angular-count-to';
import { QuestionnaireComponent } from './questionnaire/questionnaire.component';
import { FilterPipe } from './filter.pipe';
import { BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatProgressBarModule} from '@angular/material/progress-bar';
import { TreemapComponent } from './treemap/treemap.component';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';

@NgModule({
  declarations: [
    AppComponent,
    CampaignDetailsComponent,
    HomeComponent,
    CampaignHeaderComponent,
    QuestionnaireComponent,
    FilterPipe,
    TreemapComponent
    
    
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatProgressBarModule,
    HttpModule,
    HttpClientModule,
    FormsModule,
    CountToModule,
    Ng2GoogleChartsModule,
    RouterModule.forRoot([
      
      {path:'',component:HomeComponent},
      {path:'campaign-details/:Id',component:CampaignDetailsComponent}
      
    ])
  ],
  providers: [
    CampaignService,
    {provide: LocationStrategy, useClass: HashLocationStrategy}
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

这正是我的问题。它没有返回哈希值。甚至我也试图明确地保留一个哈希值。任何我出错的建议。非常感谢。

Answer 1

这里只是一个快速更新，我想出了自己的解决方案。它符合我的要求。把它放在这里以防万一有人需要它。 :)

@*This code is my "ReturnUrl.cshtml"*@

<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    window.open('http://localhost:4200/#/campaign-details/@ViewBag.CampId', '_self')
  });
</script>