Question

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

当用户刷新整个页面时，我想阻止重新加载SideBarComponent以启动ngOnInit。如何防止ngOnInit方法不能只运行SideBarMenuComponent，以便在侧栏菜单中选择的用户不会被删除。

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

Answer 1

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

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

Answer 2

我认为您可以使用Angular pushState ：

来实现这一目标

https://angular.io/guide/router

事实上，巧合的是，我收录的Angular文档中的链接也是如此。如果您转到上面的链接并刷新页面，则页面左侧的导航将保持不变，即使页面重新加载也是如此。

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

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）来处理尚未处理的任何请求。

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

2 个答案: