如何设置angular ui-router状态，以便主模板不会在每次状态改变时刷新？

import { NgModule } from '@angular/core';
import { UIRouterModule } from '@uirouter/angular';

@NgModule({
  imports: [
    UIRouterModule.forRoot()
  ]
})
export class AppModule { }

import { NgModule } from '@angular/core';
import { UIRouterModule } from '@uirouter/angular';

import { HomeComponent } from './home.component';
import { AboutComponent } from './about.component';

const states = [
  { name: 'home', url: '/home', component: HomeComponent },
  { name: 'about', url: '/about', component: AboutComponent }
];

@NgModule({
  imports: [
    UIRouterModule.forChild({ states: states })
  ]
})
export class AppRoutingModule { }

<div>
  <h1>My App</h1>
  <ui-view></ui-view>
</div>

import { Component } from '@angular/core';
import { UIRouter } from '@uirouter/angular';

@Component({
  template: `
    <h2>Home</h2>
    <button (click)="goToAbout()">Go to About</button>
  `
})
export class HomeComponent {
  constructor(private router: UIRouter) {}

  goToAbout() {
    this.router.stateService.go('about');
  }
}