Working with app routing at angular

Asked

Viewed 531 times

1

My application starts in the Appcomponent, in the Appcomponent I set the <router-outlet> </router-outlet>

Set the following routes:

const appRoutes: Routes = [
  { path: '', component: LoginComponent }
];


const loginRoutes: Routes = [
  {path: '', component: LoginComponent},
  {path: 'registrar', component: RegistrarComponent}
];

My login Component has a wrapper with borders and everything, and I would like that when you click on the "register" button, the content that is inside the wrapper change to the contents of the route 'register'.

For that I need to put the router-outlet inside the wrapper? Maybe put the wrapper in the Component app??

I’m confused about the routes.

angular laravel-routes components

  • The tag <router-outlet> is just a tag where elements should appear in the browser. Every component will appear just below that tag. I think you should do a second outlet within the wrapper and attach the route exchanges to that second.

  • Even I have a problem quite similar to yours. I will implement here and then return.

1 answer

1

After breaking my head a little bit (and doing some research), I was able to do something similar to what you want.

My application has a navigation bar that I want to leave it on top all the time but that it should disappear on the login screen.

My html app template looked something like this:

<app-nav-bar></app-nav-bar>
<router-outlet></router-outlet>

This would cause the bar to appear after the login screen, but if I went back to the "start screen" by some link, the bar would still be on the page. So I switched to this here:

<router-outlet name="navbar"></router-outlet>
<router-outlet></router-outlet>

With the addition of a route:

{path: 'home', component: NavBarComponent, outlet: 'navbar'}

Now, when it comes to changing routes, you can use two modes:

In routerLink (within HTML), use the following form:

[routerLink]="[{outlets: {primary: ['caminho'], navbar: ['caminho']}}]"

And in the components (Typescript), as follows:

router.navigate([{outlets: {primary: 'caminho', navbar: 'caminho'}}]);

Now, starting from the description of your problem, the primary router-outlet should be OUTSIDE wrapper (inside app.component.html) and auxiliary router-outlet inside the wrapper. You will make route changes using the helper.

Note:

The address bar will look different, something like

    localhost:4200/home(navbar:home)

Where localhost:4200/home is the route of the primary outlet and navbar:home is the route of auxiliary outlets

Browser other questions tagged angular laravel-routes components

You are not signed in. Login or sign up in order to post.