routerLink outside of component template in Angular 2, in base html

Question

When I use the routerLink directives inside my @Component's template property, it works.

But we're talking about my entire sites top menu bar. But when I separate it out into my main template file (layout.html), it no longer functions.

Yeah im a huge noob to ng2, admittedly, but I'd like my menu to stay out of a javascript file and inside the main layout html. How can one accomplish this?

<body>
    <base href="/" />
    <div class="row menu">
        <div class="container">
            <ul class="u-pull-left">
                <li><a [routerLink]="['/']" routerLinkActive="active">Home</a></li>
                <li>Notifications</li>
                <li>My Hisses</li>
            </ul>
            <ul class="u-pull-right">
                <li><a [routerLink]="['/register']" routerLinkActive="">Register</a></li>
                <li><a [routerLink]="['/login']" routerLinkActive="active">Login</a></li>
            </ul>
        </div>
    </div>

  <root></root>
<!-- End Document
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
</body>

Which vital step am I missing? Is it even possible?

Thank you!

Günter Zöchbauer · Answer 1 · 2016-09-28T06:56:23.447

2

routerLink is a directive and [routerLink]="..." is a binding to the input of a directive. None of these are supposed to work outside of an Angular2 component.

You can use a shared service that is instantiated outside of Angular2 and passed as a provider

 let service = new MyService();

 @NgModule({
   providers: [{provide: MyService: useValue: service}],
   ...
 })
 class AppModule {}

then you can use service to communicate with some Angular2 component or service to delegate calling router.navigate(...) do do imperatively what routerLink would do.

Another way is firing events (window.dispatchEvent(...)) and listening for this events inside Angular2.

If possible I'd avoid such a setup (having router links outside Angular2 components) entirely.

edited Sep 28 '16 at 06:56

answered Sep 28 '16 at 06:47

Günter Zöchbauer

623,577
216
2,003
1,567

Hi thank you for the response. so if im not terribly interested in having my entire top menu as part of another ng2 component, should I just then let it be static, and let it refresh the page? I'm just trying to think of an approach here to go forward with – RedactedProfile Sep 29 '16 at 05:29
I think this is just not worth the hassle. I'd reconsider using Angular2 if I'd need such a setup. Refreshing the page is also quite a poor option as well in my opinion. You can try if using the [history API](https://developer.mozilla.org/en-US/docs/Web/API/History_API) from JS makes the router in the Angular2 app update the view. Perhaps something like http://stackoverflow.com/questions/39686305/changing-shared-data-between-root-modules (or http://stackoverflow.com/questions/36566698/cant-initialize-dynamically-appended-html-component-in-angular-2 - not up-to-date) might work for you. – Günter Zöchbauer Sep 29 '16 at 05:33
So what your telling me here, is that if I want to use ng2, I have to surrender my ENTIRE page structure to one gigantic massive component's template field, and that through the router-outlet can spit out child component, otherwise there's no point to using it? I've never in my life seen a top menu bar "load" with the rest of the JS :p I just want stuff below the menu bar, and above the footer, to display dynamic content. Seems like an awefully weird restriction considering ng1 let you switch ngRouter pages using directives where ever you wanted them. – RedactedProfile Sep 29 '16 at 06:02
Even just forgetting the router component for the moment, and back to standard server side page loading. It's been my understanding this entire time that angular2 is entirely designed around Component structure, which is what im looking for. But I can't seem to get any loaded components to replace their selectors unless I add the component to the ngModule bootstrapper. But then on pages that dont contain that element, it errors out because it cant be found. Am I supposed to create a new ngModule for every single page context? – RedactedProfile Sep 29 '16 at 06:06
To your former comment. Yes, that's basically what I'm saying. I don't think you'll be happy with Angular2 if you use it that way. The best way is to see the root component as "the page". To your last comment - that's also mostly because you don't have one root component that contains your entire page. I assume the Angular team will add some support for for your scenario (was discussed several times) but that was not the primary target for the first release. – Günter Zöchbauer Sep 29 '16 at 06:40

score 0 · Answer 2 · answered Sep 28 '16 at 06:55

You cannot do this because routerLink is special angular2 syntax that gets transpiled down to js and your template HTML is the bootstrap of the application and does not get transpiled .

Typically what you would do to accomplish a static top bar is to create a new topbar component and use it as a directive in your parent app above where you call your router outlet.

Example. In your app.component. you would import your component

Import {TopNav} from 'topnav.component '

@Component({ selector : 'my-app', template : , directives: [TopNav] })

Your topnav component would contain your routing logic

routerLink outside of component template in Angular 2, in base html

2 Answers2