Angular - 2 个具有相同 URL 的组件答案

【问题标题】：Angular - 2 components with same URLAngular - 2 个具有相同 URL 的组件
【发布时间】：2020-05-12 21:16:01
【问题描述】：

我有一个要求，我需要为 2 个组件使用相同的 URL。

假设路径为/path，组件为Foo 和Bar。

最初，我会看到 Foo 组件，点击链接后，我将被重定向到 Bar 组件。

/path (Foo) => /path (Bar)

现在我看到了 Bar 组件，如果我从浏览器中按下后退按钮，我需要重定向到 Foo 组件

/path (Bar) =>back button=>/path (Foo)

如果我按下“前进”按钮，我需要查看 Bar 组件

/path (Foo) =>forward button=> /path (Bar)

所以，基本上，我需要有相同的 URL，但以某种方式保留 Angular 路由器提供的所有功能，就像有 2 条不同的路径一样。

这可能吗？我查看了 NavigationExtras 选项，例如 skipLocationChange 或 replaceUrl，但这些选项对我没有帮助。 history pushState 或 replaceState 也没有（或者我可能不知道如何使用它们）。

【问题讨论】：

最终，我认为在不对 URL 进行一些更改的情况下使用浏览器后退/前进按钮是不可能的......即使你能解决问题，我也不知道它是否将是一个好主意...用一种方法和一些示例代码更新了我的答案。我认为您可能需要对相同的路径感到满意，但添加一个查询参数来指示应该显示哪个组件

标签： javascript angular angular-routing

【解决方案1】：

听起来您最好让一个父组件具有一个 url 路径，其中包含组件 foo 和 bar，并根据 URL 中的查询参数有条件地显示其中一个或另一个。例如

toggleFooBar(){
    this.showFoo = !this.showFoo;
    this.router.navigate([], 
        {
            relativeTo: this.activatedRoute,
            queryParams: {showFoo : this.showFoo}
        }
    );
}

有关 url 参数here 的更多信息。

如果您订阅父组件中的位置更改（并相应地显示/隐藏foo 或bar），前进和后退按钮应按要求工作：

ngOnInit() {
    this.location.subscribe(queryParams => {
        // Don't forget to unsubscribe on destroy
        this.showFoo = (this.activatedRoute.snapshot.queryParams.showFoo !== 'true')
    });
}

带有代码here 的实时示例，但使用此代码查看forward / back buttons in action。

如果不对 URL 进行一些更改，我认为您将无法使用前进/后退按钮，因为必须更改 URL 才能使浏览器历史记录中的条目返回或前进。

也许可以通过一些严肃的代码体操来接近...也许您可以使用查询参数然后再次将它们取消？但即便如此，我认为您仍有可能导致浏览器/历史记录以意想不到的方式运行，这可能对您的应用程序弊大于利。

【讨论】：