我的问题标题可能有点令人困惑，所以希望以下详细信息能够澄清它。
本质上，导航栏是我无法控制的，它是用简单的 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，但浏览器上显示的组件保持不变。它不会切换组件。
有人有解决这个问题的办法吗？
我真的很感谢你的帮助！
如果有人正在寻找潜在的解决方案，这是我在另一个论坛上推荐的解决方案。也许有更好的方法来做到这一点并对其进行改进，但到目前为止，这是我所拥有的：
在 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 应用程序。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
