Angular 如何动态更改url

我经常从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/First-Title-Url
http://localhost:4200/blogs/2/Second-Title-Url
http://localhost:4200/blogs/3/Third-Title-Url

现在，在我从服务器获取数据之后，我想在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/First-Title-Url
http://localhost:4200/blogs/2/Second-Title-Url
http://localhost:4200/blogs/3/Third-Title-Url

从字面上说，我不做任何事，最后添加的标题在网址，但可读的目的

这是我在后端的博客类

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

注：标题有重复项

---

我在Asp.NETCore2.2，Angular8中运行这个项目。现在如何更改url？

您可以使用queryParam来实现这一点

constructor(private _router: Router) { }

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

---

您可以使用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，你可以像这样在构造函数中注入路由器

构造函数（专用路由器：路由器、，
专用路由：ActivatedRoute）{
}

然后从API获得响应后，只需导航到更新的url

this.http.get（“API\u URL\u HERE”）.subscribe（数据=>{
this.router.navigate（[`./${data.title}`]，
{
这条路线
});
});

这将引导您定位到此url，但请记住所有这些url必须在您的路由模块中声明。如果您认为不可能在routes数组中声明所有URL，则必须使用查询参数

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

---

不推荐使用，因为您需要添加路线列表中的所有路线，但这是可能的。你只需要在路由器的帮助下更新url，你可以像这样在构造函数中注入路由器

构造函数（专用路由器：路由器、，
专用路由：ActivatedRoute）{
}

然后从API获得响应后，只需导航到更新的url

this.http.get（“API\u URL\u HERE”）.subscribe（数据=>{
this.router.navigate（[`./${data.title}`]，
{
这条路线
});
});

这将引导您定位到此url，但请记住所有这些url必须在您的路由模块中声明。如果您认为不可能在routes数组中声明所有URL，则必须使用查询参数

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

---

您可以使用嵌套的

switchMap

运算符根据从第一个请求中获得的标题创建另一个请求。如果

paramMap

在完成之前发生更改，则

switchMap

操作员将取消所有挂起的请求

const blog$=this.route.paramMap.pipe(
开关映射（（参数）=>{
常量url=`${serverUrl}/${params.get（'id'）}`；
返回此.http.get（url）.pipe(
switchMap（（blogTitle）=>this.http.get（`${url}/{blogTitle}`）
);
})
)

然后可以使用

blog$

异步显示内容，例如

{{blog.title}
{{blog.body}

---

无论何时更改路由（更准确地说：路由参数map），它都会自动重新加载日志。

您可以使用嵌套的

开关映射

操作符根据从第一个请求中获得的标题创建另一个请求。如果

paramMap

在完成之前发生更改，则

switchMap

操作员将取消所有挂起的请求

const blog$=this.route.paramMap.pipe(
开关映射（（参数）=>{
常量url=`${serverUrl}/${params.get（'id'）}`；
返回此.http.get（url）.pipe(
switchMap（（blogTitle）=>this.http.get（`${url}/{blogTitle}`）
);
})
)

然后可以使用

blog$

异步显示内容，例如

{{blog.title}
{{blog.body}

---

无论何时更改路由（更准确地说：路由参数map），它都会自动重新加载日志。

如果您不将其用于路由目的，它不应该在URL中。@Ramesh但如果您需要基于标题，则需要在路由URL第二个参数中传递标题，否则它的工作方式类似于静态，不正常。您可以使用此代码

this.http.get（“API_url”）.subscribe（response=>{this.router.navigate（[

/${response.title}

]），{relatieto:this.route，queryParams:{title:response.title}，queryParamsHandling:'merge'}；}）如果您不将其用于路由目的，则它不应位于URL中。@Ramesh但如果您需要基于标题，则需要在路由URL第二个参数中传递标题，否则其工作方式类似于静态，并且不正常。您可以使用此代码
this.http.get（“API_url”）.subscribe（response=>{this.router.navigate（[
/${response.title}
]），{relatieto:this.route，queryParams:{title:response.title}，queryParamsHandling:'merge'}；}）
我们可以用
/
替换
？title
并附加
？
表示使用queryparam。如果您想改用
/
，则必须在路线中添加所有标题，这不是一个好方法。我们可以将
？标题
替换为
/
附加
？
表示使用queryparam。如果您想改用
/
，则必须在路线中添加所有标题，这不是一个好方法