Angular不需要的重新加载页面

Posted 2023-03-13

【中文标题】Angular不需要的重新加载页面

【英文标题】：Angular unwanted reload page

【发布时间】：2021-05-15 06:44:03

【问题描述】：

当我单击 routerLink 时，它会转到链接页面并重新加载整页（也称为父组件刷新）

我尝试制作第二个 app-routing.module，如下例所示：https://angular.io/guide/router-tutorial-toh 但它并没有解决这个问题。既不使用路由器插座名称。 我的想法不多了

我的路线是这样的：

const routes: Routes = [
  
    path: 'account',
    component: StandardLayoutComponent,
    canActivate: [AuthGuard],
    children: [
       path: 'schools', component: SchoolsComponent ,
      
        path: 'contacts',
        component: ContactsComponent,
      ,
      
        path: 'dashboard',
        component: DashboardComponent,
      ,
    ],
  ,
  
    path: ':schoolSlug',
    component: RegistrationLayoutComponent,
    children: [
      
        path: 'login',
        component: LoginComponent,
      ,
      
        path: 'forgot_password',
        component: ForgotPasswordComponent,
      
    ],
  ,
   path: '**', redirectTo: 'account/dashboard', pathMatch: 'full' ,
];

sidenav组件html：

<div
  class="d-flex flex-row mb-3 pointer lightHover"
  [routerLink]="['dashboard']"
>
  <div class="align-self-center col-md-3 pr-0 text-center">
    <img src="/assets/img/icons/squares.svg" />
  </div>
  <div class="col-md-9">
    <h6 class="font-weight-bold text-gray-dark mb-1 pt-3">
       "MENU.ANALYSE.TITLE" | translate 
    </h6>
    <p class="sidenav-txt pb-3">
       "MENU.ANALYSE.DESCRIPTION" | translate 
    </p>
  </div>
</div>
<div
  class="d-flex flex-row mb-3 pointer lightHover"
  [routerLink]="['contacts']"
>
  <div class="align-self-center col-md-3 display-5 pr-0 text-center">
    <img src="/assets/img/icons/user.svg" />
  </div>
  <div class="col-md-9">
    <h6 class="font-weight-bold text-gray-dark mb-1 pt-3">
       "MENU.CONTACTS.TITLE" | translate 
    </h6>
    <p class="sidenav-txt pb-3">
       "MENU.CONTACTS.DESCRIPTION" | translate 
    </p>
  </div>
</div>

我在 app.component 中有一个 router-outlet，在 standardLayoutComponent 中有一个（我在其中也调用 header 和 sidenav） 例如，当我单击从“/account/dashboard”到“/account/contacts”的routerlink时，standardLayoutComponent会刷新（带有标题和sidenav），而不仅仅是刷新DashboardComponents

感谢您的帮助 （使用最新版本的角度）

【问题讨论】：

请在添加 routerLink 指令的地方添加 html 标签

【参考方案1】：

好的，我终于解决了这个问题。 我转储了我的组件，看看问题是否出在他们身上。 就是这行代码：

constructor (
   ...
)
 this.router.routeReuseStrategy.shouldReuseRoute = function () 

      return false;

    ;