防止在刷新页面时重新加载角度组件

Question

我有单页应用程序网站，用4+角编写。 我有很多组件，例如FilterComponent，SideBarMenuComponent，HeaderComponent，FooterComponent等。

我要防止在用户刷新整个页面时重新加载要由ngOnInit启动的SideBarComponent。 如何防止ngOnInit方法不只在SideBarMenuComponent上运行，以便用户在侧边栏菜单中选择的任何内容都不会被删除。

如果您在评论部分没有理解，请告诉我。

Answer 1

当用户重新加载SPA应用程序时，则必须重新加载每个组件 。

您可以将用户选择的菜单存储在本地存储中。 因此，当用户重新加载您的应用时，您可以检查以前选择的菜单

Answer 2

我认为您可以使用Angular pushState实现此目的：

https://angular.io/guide/router

事实上，巧合的是，我所包含的Angular文档中的链接也确实做到了这一点。 如果您转到上面的链接并刷新页面，即使页面重新加载，页面左侧的导航也将保持不变。

请注意，pushState需要服务器端支持，这意味着服务器需要返回Angular应用程序index.html而不是404。这是稍微复杂一点的问题，但是，如果像我一样，从Node.js后端提供Angular应用程序（这不是一个好主意），您可以使用以下脚本：

const express = require('express');
const serveStatic = require('serve-static');
const compression = require('compression');
const port = process.env.PORT || 3000;
const domain =  process.env.DOMAIN;

function ensureDomain(req, res, next) {
  if (!domain || req.hostname === domain) {
    // OK, continue
    return next();
  }

  // handle port numbers if you need non defaults
  res.redirect(`http://${domain}${req.url}`);
}

const app = express();

// at top of routing calls
app.all('*', ensureDomain);

app.use(compression());

// default to .html (you can omit the extension in the URL)
app.use(serveStatic(`${__dirname}/dist`, {
  'extensions': ['html'],
  etag: true
}));

app.get('*', function(req, res){
  res.sendFile(`${__dirname}/dist/index.html`);
});

app.listen(port, () => {
  console.log('Server running...');
});

注意以下行：

app.get('*', function(req, res){
  res.sendFile(`${__dirname}/dist/index.html`);
});

使用index.html （有效代替404）处理尚未处理的任何请求。