Как динамически изменить URL

Question

Я использую, чтобы получить данные моего блога из URL-адреса, как показано ниже.

const id = this.route.snapshot.paramMap.get('id');
const newurl = `${serverUrl}/${id}`;
// this.http.get<any>(newurl); // to get data from the server.

URL выглядит ниже

http://localhost:4200/blogs/1
http://localhost:4200/blogs/2
http://localhost:4200/blogs/3

Теперь, после того как я получу данные с сервера, я быхотел бы добавить заголовок блога в конце URL, как показано ниже.

http://localhost:4200/blogs/1/First-Title-Url
http://localhost:4200/blogs/2/Second-Title-Url
http://localhost:4200/blogs/3/Third-Title-Url

Буквально я ничего не делаю с последним добавленным заголовком в URL, кроме как для удобочитаемой цели.

Вот мой класс блога вback-end

public class Blog
{
    [Key]
    public int id { get; set; }
    public string title { get; set; }
    public string body { get; set; }
}

Примечание: в заголовке есть дубликаты.

Я запускаю этот проект в Asp.Net Core 2.2, Angular 8. Как мне изменить URL сейчас?

Answer 1

Не рекомендуется , потому что вам нужно добавить все маршруты в список маршрутов, но это возможно. Вам просто нужно обновить URL с помощью маршрутизатора, который вы можете вставить внутри конструктора следующим образом:

constructor(private router: Router,
            private route: ActivatedRoute) {

}

Затем, после получения ответа от вашего API, вам просто нужно перейти к обновленному URL,

this.http.get<any>("API_URL_HERE").subscribe(data => {
  this.router.navigate([`./${data.title}`],
    {
      relativeTo: this.route
    });
});

Это приведет вас к этому URL, но помните, что все эти URL должны быть объявлены в вашем RoutingModule . Если вы считаете, что невозможно объявить все URL-адреса в массиве маршрутов, вы должны вместо этого использовать параметры запроса.

http://localhost:4200/blogs/1/First-Title-Url

Answer 2

Вы можете использовать queryParam для достижения этой цели.

constructor(private _router: Router) { }

this.http.get<any>(newurl).subscribe(data => {
      this._router.navigate(
        [],
        {
          relativeTo: this._route,
          queryParams: { title: data.title },
          queryParamsHandling: 'merge'
        });
})

Это даст URL-адрес, подобный:

http://localhost:4200/blogs/1?title=First-Title-Url

Answer 3

Вы можете использовать вложенные операторы switchMap для создания другого запроса на основе заголовка, полученного из первого запроса. Оператор switchMap отменяет все ожидающие запросы, если есть изменения в paramMap до его завершения.

const blog$ = this.route.paramMap.pipe(
  switchMap((params) => {
    const url = `${serverUrl}/${params.get('id')}`;
    return this.http.get(url).pipe(
      switchMap((blogTitle) => this.http.get(`${url}/{blogTitle}`))
    );
  })
)

Затем вы можете использовать blog$ для асинхронного отображения содержимого, например,

<ng-container *ngIf="blog$ | async as blog">
  <h1>{{blog.title}}</h1>
  <p>{{blog.body}}</p>
</ng-container>

Всякий раз, когда вы изменяете маршрут (точнее, маршрут paramsMap), он автоматически перезагружает блог.