通过 routerLink 导航时组件重新初始化

Question

我正在使用 routerLink 从主组件导航到结果组件，但每次我导航回组件时组件都会重新初始化。

如何防止组件重新初始化？

下面是代码

AppComponent HTML

<div class="collapse navbar-collapse">
  <ul class="nav navbar-nav">
    <li routerLinkActive="active" class="nav-item">
      <a class="nav-link" routerLink="/home">Home </a>
    </li>
    <li routerLinkActive="active"  class="nav-item">
      <a class="nav-link" routerLink="/results">Results</a>
    </li>
  </ul>
</div>

应用路由模块

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ResultComponent } from './pages/result/result.component';
import { HomeComponent } from './pages/home/home.component';

const routes: Routes = [
  {path: '', redirectTo: '/home', pathMatch: 'full'},
  {path:"results", component: ResultComponent},
  {path:"home", component: HomeComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {

}

结果组件

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-result',
  templateUrl: './result.component.html',
  styleUrls: ['./result.component.css']
})
export class ResultComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    console.log("created");
  }

}

当我从 Home Component 导航回 Result Component 时，它总是打印出“created”。

这是预期的行为吗？

我的实际代码添加了更多内容。

Answer 1

这正是 Angular 的工作原理。