HashLocationstrategy在angular 6应用程序中不起作用

时间:2018-12-17 12:25:47

标签: c# html angular asp.net-web-api angular6

我正在研究angular 6应用程序。我想在我的应用程序中使用HashLocationstrategy。我的用户界面如下所示:  My UI looks like this.

因此,现在,当用户单击“链接子广告系列”时,我会将用户带到浏览器中的新标签页,以选择所需的子广告系列进行绑定并发布链接,这使用户返回我的角度应用程序。现在,当将用户返回到我的应用程序时,我想用哈希将用户返回。

例如: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);
        }

上面的代码段具有一个用于选择子广告系列的视图(.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 ”操作方法,在该方法中,将用户带回到有角度的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 { }

这正是我的问题。它没有返回哈希值。甚至我也尝试过明确地保留哈希值。任何建议,我要去哪里错了。提前非常感谢。

1 个答案:

答案 0 :(得分:0)

这里只是一个快速更新,我想出了自己的解决方案。它按我的要求工作。万一有人需要,请将其放在这里。 :)

FXMLLoader fxmlLoader = (FXMLLoader) (this.baseBorderPane.getScene().getUserData());
IController controller = fxmlLoader.getController();
controller.something();