Working with app routing in angle

Question

Working with app routing in angle

Navigation

#1 by (0 votes)

1

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

I have defined 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 I click the "register" button, the content inside the wrapper switches to the contents of the 'log' route.

For this I need to put the router-outlet inside the wrapper? Maybe put the wrapper in the component app ??

I'm confused about the routes.

componentes angular rotas

asked by anonymous 13.07.2018 / 18:08

1 answer

How to use group denial $ .ajax Calling twice

score 0 · Answer 1

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

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

My html template app was something like this:

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

This made the bar appear after the login screen, but if I went back to the "home screen" by some link, the bar would continue on the page. So I've moved on to it 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, based on the description of your problem, the primary router should be OFF from the wrapper (inside the app.component.html) and the auxiliary router-outlet inside the wrapper. You will make the 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 primary outlet route and navbar:home is the route of the auxiliary outlets