Angular Router当以编程方式导航时，旧组件会留在dom中
Angular Router是Angular框架中的一个模块，用于管理应用程序的导航和路由功能。当以编程方式导航时，旧组件会留在DOM中，这是Angular Router的默认行为。
在Angular中，导航是指在不同的视图之间切换，而路由是指根据URL路径来加载不同的组件。Angular Router通过定义路由配置和使用路由导航器来实现导航和路由功能。
当以编程方式导航时，Angular Router会根据路由配置加载新的组件，并将其添加到DOM中。旧组件会保留在DOM中，直到被显式地从DOM中移除或被新的组件替换。
这种行为的优势在于可以提高应用程序的性能和用户体验。通过保留旧组件，可以避免重新加载整个页面或重新创建所有组件的开销。同时，用户可以保持当前的应用程序状态，并在导航后返回到之前的状态。
Angular Router的应用场景包括但不限于以下几个方面：
- 构建单页应用程序（SPA）：通过使用Angular Router，可以在单个页面上加载不同的组件，实现无刷新的导航和路由功能。
- 实现多级路由：Angular Router支持多级路由配置，可以实现复杂的页面结构和导航结构。
- 实现权限控制：通过路由守卫（Route Guards），可以在路由导航过程中进行权限验证和控制，实现不同用户角色的访问控制。
- 实现动态加载模块：Angular Router支持懒加载（Lazy Loading）模块，可以根据需要动态加载模块和组件，提高应用程序的加载速度和性能。
对于Angular开发者，可以使用Angular Router提供的API来实现编程方式导航。例如，可以使用router.navigate()方法来导航到指定的路由路径，并加载相应的组件。
腾讯云提供了一系列与云计算相关的产品，其中包括云服务器、云数据库、云存储等。对于Angular Router的应用，腾讯云并没有直接相关的产品或服务。但是，腾讯云的云服务器（CVM）可以作为托管Angular应用程序的基础设施，云数据库（CDB）可以用于存储应用程序的数据，云存储（COS）可以用于存储应用程序的静态资源等。
更多关于Angular Router的详细信息和使用方法，可以参考腾讯云官方文档中的相关章节：
- Angular Router官方文档：https://angular.io/guide/router
- 腾讯云产品文档：https://cloud.tencent.com/document/product
相关·内容
Angular版本:4
从LoginComponent (位于public/signin路径中)登录后，我希望导航到路径public/test中的TestComponent。我这样做如下：this._router.navigate(['public/test'])然后，它正确地重定向，但问题是它没有从DOM中删除LoginComponent (尽管ngOnDestroy确实被调用)。值得一提的是，使用<a rout
浏览 1提问于2017-08-08得票数 6
1回答
我正在尝试将用户定向到httpClient.post请求的response中的仪表板。页面导航“很好”(显示在url栏上)，但组件DOM的大多数元素不会加载。(data): Observable<any> { } 下面是我在组件中使用它的方式(["/dashboard"]);
浏览 22提问于2020-12-27得票数 0
当单击一个beforeRouteLeave时，会触发组件内保护<router-link to="/">.但是，当我以编程方式调用router.push({ path: "/" })时，不会触发它。编辑例如，从/item/1<em
浏览 1提问于2020-05-14得票数 1
回答已采纳
></router-outlet> `ProductOverviewComponent, ]export class ProductModule {
手动导航工作按预期进行http://localhos
浏览 2提问于2017-06-13得票数 11
我有一个角度组件，它在其他组件的列表上ngFors。我正在使用ngx-dnd库来启用拖放。每当子组件列表大于屏幕大小，而我使用的是google chrome时，拖放项目会导致页面向下滚动。如果我调试，我可以看到角度渲染导致一个新的项目集合被创建，旧的集合被从dom中剔除，然而当新的集合被创建在我的旧的集合之上时，屏幕被滚动以保持旧的集合在屏幕上。当</em
浏览 10提问于2018-02-02得票数 5
回答已采纳
1回答
我尝试使用Angular创建自定义web组件。javascript文件中，并通过render2嵌入到主项目中。一切都会好的，但我想应用子路由器在web组件。imports: [ ] constructor(priva
浏览 0提问于2020-11-26得票数 0
我有一个表orders..each表，行代表一个订单实体，当用户点击一个特定的行时，它应该重定向到一个新视图，其中包含点击的订单.These的详细信息两个组件不是父组件和子组件，我希望将有关点击的订单行的数据传递到导航页面<td>{{order.session}}</td> </td>这会使视图导航到
浏览 0提问于2020-02-09得票数 4
回答已采纳
我使用@angular/router中的RouterModule进行导航。import { NgModule } from '@angular/core';import { DetailComponent } from '.fullscree
浏览 50提问于2020-12-29得票数 0
回答已采纳
目前，它只在组件第一次呈现时才获取数据，而当导航请求没有被取消和导航时，它不会发出新的请求。这个组件接受一个id参数，它根据id获取数据，所以它需要刷新组件，或者我需要将方法添加到useEffect钩子中？路由组件import { BrowserRouter, Route, Switch} from 'react-router-<e
浏览 7提问于2021-10-20得票数 1
当我使用下面的链接时，我的React应用程序可以正常工作，这意味着如果我点击一个链接，应用程序不会完全重新加载，而只是改变其前端外观。<Link to="/about">About</Link> 现在我想使用来自React-Bootstrap的导航栏。但是，如果我单击导航栏，我的整个web应用程序都会重新加载，这是我不想要的。这是我认为我的代码的相关部分： <Router>
<Navbar bg="dark" var
浏览 15提问于2021-07-06得票数 0
回答已采纳
2回答
我正在开发一个“远程控制”的React应用程序，并试图通过Pusher连接该应用程序的选项卡导航。我使用的反应-路由器-多姆，并已经建立了我的连接到推车和它听在componentDidMount中的渠道。每次返回消息时，我都需要让应用程序更改URL导航，但无法找到正确的“推送”方式。我在谷歌上有很多关于以编程方式导航的线程--路由器-dom，并且尝试过this.history.push()、this.props.hi
浏览 2提问于2018-05-30得票数 2
回答已采纳
import { BrowserRouter as Router } from 'react-router-dom'import history from './app&#x
浏览 0提问于2020-11-12得票数 6
回答已采纳
以下是单击函数import {BrowserRouter as Router,Route} from 'react-router-dom';class Buttons extends Component {
skipClick(){className={skipShow} onClic
浏览 2提问于2017-03-26得票数 1
回答已采纳
3回答
当用户单击EDIT图标时，将打开一个页面。在用户submit记录之后，如果它成功，我们的页面应该重定向到ListCertificate。用户成功保存后，我们的页面应该重定向到ListCertificate组件。return <Redirect to='/listcertificate&#x
浏览 8提问于2021-12-06得票数 1
回答已采纳
如何在有状态组件(类组件)中使用react路由器5.1.2中的history.push('path')？ 我找到了这个，但它是无状态组件的解决方案。import { useHistory } from "react-router-dom";
let history = useHistory();
}
浏览 65提问于2019-12-19得票数 14
回答已采纳
1回答
我在我的webapp中有react-redux和react-router，而我试图在保持redux状态的同时更改路由。(我不能将其保留在localStorage中的原因是，当用户关闭该页面时，数据应该会消失)
浏览 1提问于2020-11-17得票数 1
使用react路由器v4和Typescript以编程方式导航时出错：import { BrowserRouter as Router , Switch , Route} from 'react-router-dom';
import * as R
浏览 71提问于2019-04-22得票数 3
回答已采纳
1回答
<BrowserRouter></BrowserRouter>
假设应用程序组件呈现Header(链接列表)和Main(路由列表)，component.Does从一个链接导航到另一个链接重新呈现应用程序组件
浏览 2提问于2018-08-23得票数 1
FirstComponent &第三个组件在app-routing.module.ts中配置
现在描述场景:当我在localhost:4200/浏览器中的第一个url时，我会得到第一个组件。第一个组件超文本标记语言下面只有一个button.Like
当我单击按钮时，ts文件中的方法切换一个布尔值，并根据布尔变量触发第二个组件。具有文本框和下面的button.Like的第二个组件
现
浏览 4提问于2020-09-10得票数 0
我使用的是"angular2": "2.0.0-beta.15" (与"typescript": "^1.8.10",一起使用)，而AppComponent是我的主要组件，它只是作为shell工作并处理导航：import { RouteConfig, ROUTER_DIRECTIVES, ROUTER</e
浏览 3提问于2016-04-24得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
