如何在Angular应用程序范围之外更改Angular中的路由？ [英] How can I change the routing in Angular from outside the scope of the Angular application?
问题描述
我的问题标题可能有点令人困惑，所以希望以下细节可以清除它。
基本上，导航栏不受我的控制，它只用纯HTML / JS编写。我的应用程序是用Angular编写的，并在其中设置了路由。
My question title might be a bit confusing, so hopefully the following details will clear it up.
Essentially, the navigation bar is out of my control and it is written in just plain HTML/JS. My application is written in Angular and has routing set up within it.
我可以做什么来从导航栏触发我的Angular应用程序中的路由？
Is there anything I can do to trigger routing in my Angular app from the nav bar?
说我在index.html中有以下内容：
Say I have the following in 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中的路由？
Obviously, my Angular application starts from <app-root> and does not know about the tag right above it. However, is there a way to affect the routing within the Angular from outside of it?
我认为调用history.pushState（）会改变它，但它似乎没有做任何事情。它确实更改了URL，但浏览器上显示的组件保持不变。它不会切换组件。
I figured that calling history.pushState() would change it, but it doesn't seem to be doing anything. It does change the URL, but the component displayed on the browser stays the same. It does not switch the component.
有没有人能解决这个问题？
我非常感谢你的帮助！
Does anyone have a solution to this problem?
I really appreciate the help!
推荐答案
如果有人正在寻找潜在的解决方案，这是我在另一个论坛推荐的解决方案。也许有一种更好的方法可以做到并改进它，但这是我到目前为止所拥有的：
If someone is looking for a potential solution, here's a solution I was recommended in another forum. Maybe there's a better way to do it and improve upon it, but here's what I have so far:
在app.component.ts（或者你想处理路由的任何地方） ）：
In app.component.ts (or wherever you want to handle routing):
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：
Now, in 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路由逻辑放入服务等等。但这是我提出的解决方案的一般要点。
Obviously, you can put your onclick method in a seperate JS file, and put the Angular routing logic in a service, etc etc. But this is the general gist of the solution I came up with.
无论哪种方式，这都应该让人们从外面路由一个Angular应用程序。
Either way, this should enable people to route an Angular app from the outside.
这篇关于如何在Angular应用程序范围之外更改Angular中的路由？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
