防止在刷新頁面時重新加載角度組件

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）處理尚未處理的任何請求。