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.

网址显示在下方

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

从字面上看，我对网址中最后添加的标题不做任何操作，但出于可读目的。

这是我后端的Blog类

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中运行此项目。

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 中声明。如果您认为不可能在routes数组中声明所有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'
        });
})

这将产生如下网址：

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），都会自动重新加载博客。

如何动态更改URL

3 个答案: