[英]How do I clear the previous page when navigating to a new page?
I have been working on an angular project for several months and while I have the basic functionality down, when I click a link to go to a new page on the site, the homepage doesn't get cleared and disappear when the new page loads:我已经在 angular 项目上工作了几个月,虽然我的基本功能已经关闭,但当我单击指向 go 的链接到网站上的新页面时,当新页面加载时,主页不会被清除并消失:
Before前
After后
This happens across every page I have.这发生在我拥有的每一页上。 I've looked up using RouterLinks for Angular, tried window.location.href
in javascript, and nothing seems to work.我已经使用 RouterLinks 查找了 Angular,在 javascript 中尝试了window.location.href
,但似乎没有任何效果。 I can provide code snippets as needed.我可以根据需要提供代码片段。 Navbar:导航栏:
<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: Javascript:
navigate()
{
window.location.href="";
}
By doing navigate() {}, you are trying to call navigate.通过执行 navigate() {},您正在尝试调用 navigate。 To actually define a function you have to say you are defining a function.要实际定义 function,您必须说您正在定义 function。
Below is some code you can work off of:以下是一些您可以使用的代码:
function navigate() { window.location.href=""; }
<a onclick="navigate()"><button>hide page</button></a>
Another way you could reset your page, though, is if you actually delete or hide all code from the page:但是,您可以重置页面的另一种方法是,如果您实际删除或隐藏页面中的所有代码:
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>
Your best bet will be to use Angular's router for simple navigation within the angular app.您最好的选择是使用Angular 的路由器在 angular 应用程序中进行简单导航。
Your usage of the routerLink
in the template seems correct.您在模板中使用routerLink
似乎是正确的。 when you are using Angular's built-in router:当你使用 Angular 的内置路由器时:
window.location.href
(as it causes the app to reload)您不应使用window.location.href
(因为它会导致应用程序重新加载)<router-outlet></router-outlet>
create a AppRouterModule, with the routes to your components, and import it into your main AppModule.创建一个 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 { }
in your AppModule在您的 AppModule 中
@NgModule({
imports: [
...
AppRouterModule
],
...
})
export class AppModule { }
and in your template:并在您的模板中:
<nav id='navbar'>
...
</nav>
<router-outlet></router-outlet>
hopefully this gets you started.希望这能让你开始。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.