Angular - Get router url before loading router

Question

I want to use my app as an iframe on other web pages. However, therefore I need a 'stripped' version of my app, where some features are disabled.

Normally, I navigate with url/#/... For the iframe, it is url/#/iframe/... . They both navigate to the same pages, although some features are disabled in the latter.

My problem is that I want to place a div around the router-outlet with a class depending on whether I'm in iframe-mode or not. At this moment, I can only think of checking

this.route.snapshot.url[0].path === 'iframe'

in the car.component.ts file, storing this value somewhere in app.service.ts as appService.iframe and then using this value in app.component.html.

This, however, gives the following error:

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'body1'. Current value: 'body2'.

Can I get the url before loading the router?

app.routes.ts file:

// Route Configuration
export const routes: Routes = [
  {path: '', component: CarList},
  {path: 'iframe', component: CarList},
  {path: 'iframe/:loket', component: Car},
  {path: ':loket', component: Car}
];

// Export routes
export const routing = RouterModule.forRoot(routes);

app.component.html file:

 <div class="container">
      <div class="header">
        <header></header>
      </div>  
      <div [ngClass]="(!appService.iframe) ? 'body1': 'body2'">
        <router-outlet></router-outlet>
      </div>
      <div class="footer">
        <footer></footer>
    </div>    
</div>

I suppose you can use the native location.hash value and check from there — Poul Kruijt
– Poul Kruijt, Commented Dec 13, 2018 at 15:52
That did the job! Used this.appState.iframe = location.hash.includes("iframe") in the constructor of app.component.ts! — Toike
– Toike, Commented Dec 13, 2018 at 16:10

Poul Kruijt · Accepted Answer · 2018-12-13 20:34:33Z

1

Using the native location.hash you can determine if it includes the iframe value:

location.hash.includes("iframe")

answered Dec 13, 2018 at 20:34

Poul Kruijt

72.3k12 gold badges152 silver badges152 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular - Get router url before loading router

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related