Angular Component Life Cycle

Asked

Viewed 79 times

1

I’m starting my studies in Angular and trying to understand the life cycle of the components. I structured my application to run in a single module. And the navigation by the components will be through the Route feature.

In my Appcomponent I performed the following implementation:

<MeuComponenteMenu></MeuComponenteMenu>
<div class="qualquer">
<router-outlet></router-outlet>
</div>
<MeuComponenteRodape></MeuComponenteRodape>

Then, in the Html of Meucomponentemenu:

<a class="nav-link" href="/about" role="button" aria-expanded="false">
<i class="fas fa-table fa-fw"></i>
<span>Sobre</span>
</a>

In the Route configuration file:

const routes: Routes = [
  {path: '', component: Home},
  {path: 'about', component: AboutComponent}
];

So I added a log output to the Appmodule and Appcomponent constructors. Whenever I navigate between my Menu options, the Module Components and the Main Component (Appcomponent) appear to be instantiated. Because when checking the log, I see that the respective constructors were executed.

My question is, shouldn’t these components only be instantiated once? Unless the user manually ran a refresh on the page? The way it is, even Dependency Injections won’t work.

Thank you,

components

1 answer

0

Well, it must be a beginner’s mistake. Instead of using href I used the following:

[routerLink]="['/about']"

I changed the route configuration:

  {path: '', redirectTo: 'home', pathMatch: 'full'},
  {path: 'home', component: Home},

Vamo!

Browser other questions tagged components

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