Стратегия HashLocation не работает в приложении angular 6
Я работаю над приложением angular 6. Я хочу использовать HashLocationstrategy в своем приложении. Мой интерфейс выглядит так:
Итак, теперь, когда пользователь нажимает «Link Sub Campaign», я перенаправляю пользователя на новую вкладку в браузере, чтобы выбрать необходимую вспомогательную кампанию для привязки и публикации ссылки, я возвращаю пользователя в свое приложение angular. Теперь, возвращая пользователя в свое приложение, я хочу вернуть пользователя с хешем.
Например: http: // localhost: 4200 / # / подробности кампании / 2 (Требуемый формат) http: // локальный: 4200 / подробности кампании / 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# (веб-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», где я возвращаю пользователя обратно в приложение 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 { }И вот как раз моя проблема. Он не возвращается с хеш-значением. Даже я пытался явно сохранить хеш. Любые предложения, в которых я ошибаюсь. Большое спасибо заранее.
@KarnanMuthukumar Сэр, я обновил свой код.
Ответы 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>
Вы можете показать мне свой файл app.module.ts.