Angular - 使用可观察结果导航到路由答案

【问题标题】：Angular - Navigating to route with result of observableAngular - 使用可观察结果导航到路由
【发布时间】：2018-11-22 20:39:41
【问题描述】：

我有一个有趣的问题，我似乎无法弄清楚。

我正在发出一个返回 Observable 的 HTTP 请求。在调用 router.navigate 时，我订阅了 observable 并使用该值作为我的路由的参数。导航工作正常，但是当我登陆新路线时，我无法单击任何内容，页面被完全锁定。刷新页面后，一切都按预期工作。

下面的代码sn-p供参考。

createTemplate() {
    this.templateService.create(this.templateModel)
        .subscribe(template => {
          this.router.navigate(['/admin/templates/builder', template.id]);
      });
    }

【问题讨论】：

你看到url中;template.id的值了吗？
是的，值被正确传递，ngOnInit 被正确调用，因为传递的 ID 用于使用 API 检索项目。
着陆页是什么样的？你能发布一些代码吗？
此问题仅在创建新项目并导航到路线时出现，刷新后页面正常工作。我只能假设这与可观察对象的分辨率和导航一起。
任何控制台错误？

标签： javascript angular routing observable subscribe

【解决方案1】：

this.templateService.create 方法有什么作用？什么样的 Observable 返回？

也许您必须关闭订阅？

createTemplate() {
    this.templateService.create(this.templateModel)
        .pipe(first())
        .subscribe(template => {
          this.router.navigate(['/admin/templates/builder', template.id]);
      });
    }

【讨论】：

您能回答问题吗？
是的，我可以回答问题，但仅限在线时。 templateService.create 返回Observable<Template>