導航到新頁面時如何清除上一頁？

Question

我已經在 angular 項目上工作了幾個月，雖然我的基本功能已經關閉，但當我單擊指向 go 的鏈接到網站上的新頁面時，當新頁面加載時，主頁不會被清除並消失：

前

后

這發生在我擁有的每一頁上。 我已經使用 RouterLinks 查找了 Angular，在 javascript 中嘗試了window.location.href ，但似乎沒有任何效果。 我可以根據需要提供代碼片段。 導航欄：

<nav id='navbar'>
      <div class='searchbar'>
        <form action='/action_page.php'>
          <input type='text' id='searchInput' placeholder='Search the app...'>
          <ul id='searchList' style='display: none;'>
            <li><a href='/account'>account</a></li>
            <li><a href='/collection'>collect</a></li>
            <li><a href='/messaging'>messages</a></li>
            <li><a href='/bill'>bill</a></li>
            <li><a href='/notfound'></a></li>
          </ul>
          <button id='submit' onclick="searchFunction()" type='submitbtn'>Submit</button>
        </form>
      </div>

      <div id='home'>
          <button class ='home' type='button'><a routerLink='' onClick="navigate()">Homepage</a></button>
      </div>
  
      <div id='collect-cash'>
          <button class ='collect'><a routerLink='/collection' onClick="navigate()">Collect Cash</a></button>
          <!--this button must go to a page that shows an amount that the app can collect. 
          -->
      </div>
  
      <div id='shareacct'>
          <button class ='account' type='button'><a routerLink='/account' onClick="navigate()">Share Account/Add Users</a></button>
          <!--this button brings up a menu that specifies which users to add-->
      </div>
  
      <div id='splitbill'>
          <button class ='bill' type='button'> <a routerLink='/bill' onClick="navigate()">Split Bill</a></button>
          <!--this button brings up a page that asks users to split the bill-->
      </div>
    </nav>

Javascript：

navigate()
        {
          window.location.href="";
     }

Answer 1

通過執行 navigate() {}，您正在嘗試調用 navigate。 要實際定義 function，您必須說您正在定義 function。

以下是一些您可以使用的代碼：

 function navigate() { window.location.href=""; }

 <a onclick="navigate()"><button>hide page</button></a>

但是，您可以重置頁面的另一種方法是，如果您實際刪除或隱藏頁面中的所有代碼：

 function removePage() { document.body.innerHTML = ""; } function hidePage() { document.body.style.display = "none"; }

 <h1>Demo to delete/hide the page</h1> <a onclick="removePage();"><button>delete the page</button</a> <a onclick="hidePage();"><button>hide the page</button></a> <,-- text to show the full extent of what happens --> <p>Lorem ipsum dolor sit amet. consectetur adipiscing elit, Praesent odio turpis, accumsan at egestas sed. maximus id arcu, Aenean quis ante dictum, volutpat dolor sed. lobortis mi. Suspendisse ac felis justo. Nullam lacinia dictum accumsan, In nec justo lobortis, porta diam scelerisque. bibendum magna. Mauris ac luctus justo. Nam varius bibendum ex. Suspendisse potenti.</p> <p>Praesent ac egestas mauris, Nunc dolor tellus, porta id neque non. scelerisque tempor neque, Nulla vehicula dolor diam. vitae venenatis lacus ullamcorper nec, Maecenas pretium quam ac nibh efficitur. placerat varius enim accumsan, Vivamus elementum sapien ac nisl cursus. vitae hendrerit sapien fringilla. Donec tempus fringilla mattis. Mauris mollis consequat tincidunt. Sed non rutrum erat. Nunc posuere vitae nunc non vestibulum, Nam facilisis, nunc ac molestie consequat, ligula nisl ullamcorper ante. ac eleifend nulla neque sollicitudin eros. Nulla tristique nulla quis pellentesque efficitur, Sed commodo ultricies sapien. ac feugiat ligula dictum eget.</p>

Answer 2

您最好的選擇是使用Angular 的路由器在 angular 應用程序中進行簡單導航。

您在模板中使用routerLink似乎是正確的。 當你使用 Angular 的內置路由器時：

• 您應該刪除這個“導航”function，以及對它的 onclick 調用
• 您不應使用window.location.href （因為它會導致應用程序重新加載）
• 您需要將出口路由到您的基本路由組件模板

<router-outlet></router-outlet>

創建一個 AppRouterModule，其中包含到您的組件的路由，並將其導入您的主 AppModule。

const appRoutes: Routes = [
  { path: '', redirectTo: '/account', pathMatch: 'full' },

  { path: 'collection', component: CollectionComponent }, // <-- Make sure these match your components
  { path: 'account', component: AccountComponent },
  { path: 'bill', component: BillComponent },
];

@NgModule({
  imports: [
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true } // <-- debugging purposes only
    )
  ],
  ...
})
export class AppRouterModule { }

在您的 AppModule 中

@NgModule({
  imports: [
    ...
    AppRouterModule
  ],
  ...
})
export class AppModule { }

並在您的模板中：

<nav id='navbar'>
 ...
</nav>
<router-outlet></router-outlet>

希望這能讓你開始。