如何从 Angular 应用程序范围之外更改 Angular 中的路由？答案

【问题标题】：How can I change the routing in Angular from outside the scope of the Angular application?如何从 Angular 应用程序范围之外更改 Angular 中的路由？
【发布时间】：2017-02-28 16:58:27
【问题描述】：

我的问题标题可能有点令人困惑，因此希望以下详细信息能够解决它。
本质上，导航栏是我无法控制的，它是用纯 HTML/JS 编写的。我的应用程序是用 Angular 编写的，并在其中设置了路由。

我可以做些什么来从导航栏触发我的 Angular 应用程序中的路由？

假设我在 index.html 中有以下内容：

<body>
    <header>
        <a onclick="history.pushState({}, '', '/home');">Home</a>
        <a onclick="history.pushState({}, '', '/test');">Test</a>
    </header>
    <app-root></app-root>
</body>

显然，我的 Angular 应用程序从 <app-root> 开始，并且不知道它上面的标签。但是，有没有办法从外部影响 Angular 内部的路由？

我认为调用 history.pushState() 会改变它，但它似乎没有做任何事情。它确实更改了 URL，但浏览器上显示的组件保持不变。它不会切换组件。

有没有人能解决这个问题？
非常感谢您的帮助！

【问题讨论】：

你的基础href是否设置在head标签中？它是什么？ angular.io/docs/ts/latest/guide/router.html#base-href
@Will 已设置。在我的示例应用程序中（我在问题中描述的方法不起作用），它只是设置为

标签： javascript html angular

【解决方案1】：

如果有人正在寻找潜在的解决方案，这是我在另一个论坛中推荐的解决方案。也许有更好的方法来做到这一点并对其进行改进，但这是我目前所拥有的：

在 app.component.ts（或任何你想处理路由的地方）：

declare var window: any;

//@Component stuff...
export class AppComponent implements OnInit, OnDestroy {

    routerSubject: Subject<string> = new Subject<string>();

    constructor(private router: Router) {
        // Assign the observable to the window object, so that we can call it from outside
        window.routerSubject = this.routerSubject;
    }

    ngOnInit() {
        this.routerSubject.subscribe((url: string) => {
            // Programmatically navigate whenever a new url gets emitted.
            this.router.navigate([`/${url}`]);
        });
    }

    ngOnDestroy() {
        this.routerSubject.unsubscribe();
    }
}

现在，在 index.html 中：

<body>
    <header>
        <!-- Emit a new value on click, so that Angular (which has already been subscribed) can programmatically route -->
        <a onclick="window.routerSubject.next('home');">Home</a>
        <a onclick="window.routerSubject.next('about');">About</a>
    </header>
    <app-root></app-root>
</body>

显然，您可以将 onclick 方法放在单独的 JS 文件中，并将 Angular 路由逻辑放在服务中，等等。但这是我提出的解决方案的一般要点。

无论哪种方式，这应该使人们能够从外部路由 Angular 应用程序。

【讨论】：

这很好，但我很想在这里看到更多细节，例如，你从哪里得到Subject，也应该是implements，而不是extends，还有@987654326 @ 应该是 url... 但是你从哪里得到 Subject？ Nm，在'rxjs/Subject' 中找到它，无论如何，感谢您在所有反对者的情况下找到解决方案
@SerjSagan 我已经进行了更正。感谢您指出。
非常感谢！这个对我有用。我们同时使用 Angular 1.3 和 Angular 7。我遇到了一个问题，即您单击路由链接两次才能使用 Angular 7。现在它已修复

【解决方案2】：

如果您使用的是最新的 angular2 版本，您可以使用 routerLink，如下所示：

 <a routerLink="/home" routerLinkActive="my-link-active-css-class">Home</a>

文档还不错：https://angular.io/docs/ts/latest/guide/router.html

【讨论】：

但我相信这只是在 Angular 应用程序中。该指令在它之外不起作用。我的应用程序中的导航栏是外部提供的，不在我的 Angular 应用程序中。
你试过<a href="/home">Home</a> 吗？
如果我使用href，它只会发出一个服务器请求。如果我为每个导航链接发出服务器请求，这将破坏 SPA 的目的。
@gjvatsalya 当然它会发出一个服务器请求，由于无效的路由，应用程序将处理该请求，服务器将返回索引。您可以导航并且不发出服务器请求的唯一方法是它是一个 hashbang 链接 (#!)；哈希指示浏览器尝试在页面内导航，而角度脚本会先发制人并加载代码。你不能同时拥有它；要么将导航栏集成到 Angular 中，要么欺骗浏览器。
如果服务器端调用是主要缺点，您可以尝试 useHash: true 在 Angular 2 路由中使用哈希。见docs。