Question

我想检测何时在我的单页应用程序（Angular项目）中使用路由器刷新页面

还有其他替代方法吗？

Answer 1

在component.ts

中

import { Subscription } from 'rxjs';

export let browserRefresh = false;

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})

export class AppComponent implements OnDestroy {

  subscription: Subscription;

  constructor(private router: Router) {
    this.subscription = router.events.subscribe((event) => {
        if (event instanceof NavigationStart) {
          browserRefresh = !router.navigated;
        }
    });
  }

在您需要的页面中

import { browserRefresh } from '../app.component';

....

  ngOnInit() {
    this.browserRefresh = browserRefresh;
    console.log('refreshed?:', browserRefresh);
  }

在此处查看工作示例https://stackblitz.com/edit/refreshangular?file=src%2Fapp%2Fpage-a%2Fpage-a.component.ts

Answer 2

尝试

  this.router.events
    .pipe(filter((rs): rs is NavigationEnd => rs instanceof NavigationEnd))
    .subscribe(event => {
      if (
        event.id === 1 &&
        event.url === event.urlAfterRedirects 
      ) {
       ..... // here your code when page is refresh
      }
    })

Answer 3

Angular 7+ 的最新方式，我们现在可以添加路由导航属性。所以如果'/somepage'是我们想要检测浏览器是否刷新的页面，我们在访问这个页面时设置navigate属性prevPage：

this.router.navigate(['/somepage'], { state: { prevPage: this.router.url } });

然后在某个页面内：

  ngOnInit(): void {
    const previousUrl = history.state.prevPage ?? null;

    if (!this.previousUrl) {
      console.log('page was refreshed!');
    } else {
      console.log('I came here from: ', previousUrl);
    }
  }

注意：如果您想从特定页面检测浏览器刷新，这会起作用。如果您在整个网站都需要这个，那么我会采用不同的方法。

Answer 4

Angular应用程序是一个单页应用程序，在一个单页应用程序的上下文中，整个应用程序将加载一次，并且当用户使用您的应用程序时会刷新数据或屏幕。

刷新浏览器等同于关闭应用程序并再次启动。在Angular应用程序中没有默认的方式对此做出响应。

您也许可以使用onBeforeUnload()模拟某些内容，以记录该应用程序已重新加载；然后在应用程序的初始化例程中检查该日志以执行某些特殊操作。

Answer 5

我想检测何时使用路由器刷新页面

您将顶级解析器添加到路由器。如果您只有一个顶级路由器，那么它将仅被解析一次，子代将处理页面导航。每次解析器解析都等于在浏览器中刷新页面。

const routes: Routes = [
  {
    path: '',
    component: TopComponent,
    resolve: { loaded: PageLoadedResolver },
    children: [
         ...
    ]
  }
];

还有许多其他方法可以检测Angular中的页面加载事件。

您的AppModule的构造函数。

@NgModule({...})
export class AppModule {
     public constructor() {
          console.log('page loaded');
     }
}

注入根中的服务至少使用一次。

@Injector({provideIn: 'root'})
export class MyService {
     public constructor() {
          console.log('page loaded');
     }
}

还有一个main.ts文件可以引导Angular应用程序。

    platformBrowserDynamic().bootstrapModule(AppModule)
        .then(() => console.log('page loaded'))
        .catch(err => console.error(err));

基本上，在任何运行JavaScript的地方……

在角度项目中检测浏览器刷新？

5 个答案: