Menu
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.
Is there anything I can do to trigger routing in my Angular app from the nav bar?
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>
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?
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!
556
Angular provides extensive set of navigation feature to accommodate simple scenario to complex scenario. The process of defining navigation element and the corresponding view is called Routing. Angular provides a separate module, RouterModule to set up the navigation in the Angular application.
In order to detect route change at any moment in AngularJS, this can be achieved by using the $on() method.
Add the AppRoutingModule link The router is dedicated to routing and imported by the root AppModule . By convention, the module class name is AppRoutingModule and it belongs in the app-routing.module.ts in the src/app directory. Run ng generate to create the application routing module.
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:
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();
}
}
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>
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.
Either way, this should enable people to route an Angular app from the outside.
75
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With