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

【问题标题】：Prevent reloading of angular component while refreshing page刷新页面时防止重新加载角度组件
【发布时间】：2018-01-11 07:20:24
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript angular typescript routing

【解决方案1】：

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

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

【讨论】：

我的应用程序完全基于 rest api 并且有多个 api 来提供侧栏菜单列表作为不同的类别所以我不想存储选定的值然后循环遍历每个列表以显示选定的菜单在更新的回应中。
完全基于rest api的Angular应用大家都知道。当用户选择一个链接时，您将存储它并且必须检查您的模板循环。这对你的循环影响不大。但是您无法阻止重新加载后的 onInit 更改。如果你不想保存本地存储，如果可以使用火基地这种类型的数据
So I dont want to store selected values and then loop in through each list to display selected menu in updated response. 您不需要为此更新您的回复
好的，谢谢！即使我们确实有另一种解决方法，但我想知道，当用户刷新整个页面时，角度是否提供了一种停止重新加载组件的方法。据我所知，每个组件都有自己的状态和角度保留它。
我不同意你兄弟的观点，因为谷歌已经引入了这些框架，所以我们不需要再次刷新整个数据，并且总是尝试通过遵循不同的模式来提高我们的应用程序的性能。之前我们使用 MVC 执行此任务，但现在我们使用 MVP，MVVM。

【解决方案2】：

我认为您可以使用 Angular pushState 来实现这一点：

https://angular.io/guide/router

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

请注意，pushState 需要服务器端支持，这意味着服务器需要返回 Angular 应用程序 index.html 而不是 404。这是一个稍微复杂的问题，但如果像我一样，您从节点提供 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）处理任何尚未处理的请求。

【讨论】：