导航到新页面时如何清除上一页？

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>

希望这能让你开始。