Angular routing，使用outlets创建路由
Angular routing是Angular框架中用于创建和管理路由的功能。它允许开发人员通过定义路由配置来控制应用程序的导航。
Angular routing的主要概念包括路由器（Router）、路由（Route）、路由配置（Route Configuration）和出口（Outlet）。
- 路由器（Router）：Angular的路由器是一个用于管理导航的核心模块。它负责解析URL，并根据路由配置来加载相应的组件。
- 路由（Route）：路由是指导航的基本单元，它定义了一个URL路径与一个组件之间的映射关系。每个路由都包含一个路径（path）和一个加载的组件（component）。
- 路由配置（Route Configuration）：路由配置是一个定义路由的集合。它由一个路由数组组成，每个路由都包含路径、组件以及其他可选属性，如路由守卫（Guards）和解析器（Resolvers）。
- 出口（Outlet）：出口是指定在页面中加载组件的位置。通过使用出口，我们可以在同一个页面中加载多个组件，并根据路由配置来决定哪个组件显示在哪个出口中。
Angular routing的优势和应用场景：
- 优势：
- 单页应用（SPA）：Angular routing使得创建单页应用变得简单，通过动态加载组件，实现无刷新的页面切换。
- 模块化开发：通过路由配置，可以将应用程序拆分为多个模块，每个模块负责管理自己的路由和组件。
- 嵌套路由：Angular routing支持嵌套路由，可以创建复杂的页面结构，提高代码的可维护性和可扩展性。
- 路由守卫：可以通过路由守卫来控制用户访问权限，实现身份验证和授权等功能。
- 应用场景：
- 多页面应用：Angular routing可以用于构建多页面应用，通过定义不同的路由配置来管理不同页面的导航。
- 博客或新闻网站：可以使用Angular routing来实现文章列表、文章详情等页面的导航。
- 电子商务网站：可以使用Angular routing来实现商品列表、商品详情、购物车等页面的导航。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
- 腾讯云物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
- 腾讯云移动开发（移动推送、移动分析等）：https://cloud.tencent.com/product/mobile
- 腾讯云区块链（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云元宇宙（Tencent Cloud Metaverse）：https://cloud.tencent.com/solution/metaverse
相关·内容
我有我的应用程序，它的工作没有路由。但是有一个地方我可以打开Dialog窗口，它也不需要路由。打字： this.router.navigate([{ outlets如果我打开对话框窗口，单击按钮以显示幻灯片
浏览 16提问于2020-02-25得票数 2
如果我将ComponentOne和ListComponent路由放在相同的子数组中，如下所示： path: '', component: ListComponent, },]},
错误:无法匹配任何路由当我将ComponentOne和ListComponent路由</e
浏览 0提问于2019-01-05得票数 0
回答已采纳
1回答
[routerLink]="['page1','page2',{ outlets: { myoutlet: ['page3','page4'] } }]"[routerLink]="['guide','main','form', 'first', {outlets: {mynamed: ['page1'
浏览 0提问于2018-03-08得票数 0
回答已采纳
2回答
除了应用程序根的导航之外，我还试图将导航添加到组件，但它没有导航到组件路由。我用的是两个路由器插座：
当导航到“users.component.html use
浏览 1提问于2018-08-10得票数 6
回答已采纳
1回答
我正在尝试通过路由在我的应用程序中启动一个模式。一切似乎都正常，除了在URL中添加了一个阻止其解析的额外斜杠。</head>const ACCOUNT_ROUTES: Routes = [ path: 'accounts<a [routerLink]="[{ outlets: { modal: ['accounts', account.id, 'edit
浏览 17提问于2017-02-07得票数 17
回答已采纳
我有一个延迟加载的问题，不能路由到指定的路由器插座。有没有人能看看我哪里错了？我有一个主页，其中有一个链接到产品->默认路由器插座和产品详细信息->命名路由器插座。<div><a [routerLink]="['product']"> Product </a> </div>
<div><a [routerLink]="['productdetail',
浏览 0提问于2017-11-25得票数 10
回答已采纳
1回答
使用角度多出口
、、
我的app-routing.module.ts内容如下所示。</div>
<div class="row"> <a [routerLink]="['',{outlets
浏览 21提问于2021-10-16得票数 1
主页面有一个路由器出口，制表符有次要的路由器出口.但是，我无法在主菜单中创建显示选项卡页的routerLink。
链接到选项卡页
/tabs/(about:about//home:home)我在这份打字稿中也
浏览 0提问于2018-07-07得票数 15
1回答
角6辅助路径
、、、、
我想做以下几件事我成功地使用路由器-出口和app.routing-module.ts导航到侧导航栏。我尝试了Nav4组件中选项卡的辅助路由。但失败了。有人能帮我吗？App.Routing-导入所需组件后的module.ts { path: '', component: Nav1Component},configureoutlet: ['tab1'] }} ]" routerLinkAct
浏览 5提问于2018-12-17得票数 0
回答已采纳
1回答
我正在尝试配置组件中的辅助路由，其中路由的内容显示在选项卡中<a class="list" [routerLink]="[{outlets:{primary:futuresMargin:'futuresMargin'}}]" routerLinkActive="router-link-active">Projected VM</a>
在variation-margin.rout
浏览 0提问于2018-04-05得票数 0
这是setup...in app.routing: path: '', children: [在management.routing中 path: '', children:management/someroute中，我有模板：[routerLink]="[{ outle
浏览 0提问于2018-06-15得票数 4
我正在尝试使命名路由工作，但我找不到我做错了什么。 我在angular官方网站和其他网站上尝试了这个教程。我需要有一个导航栏，(由应用程序菜单模拟的时刻)，并命名路由器插座旁边。我的主路由器已用于其他用途 menu.component.html <a [routerLink]="[{ outlets: { main: ['users'] } }]">Users</a> home.component.html(描述应用程序菜单选择器)
浏览 12提问于2019-01-27得票数 3
我正试图在主路由器出口内得到一个路由器插座来显示一个组件.我正确地选择了路由器，但它没有显示我在第二个出口中选择的组件。app-routing.module.tsimport { Routes, RouterModule } from'@angular/router';
{ path
浏览 2提问于2020-02-10得票数 0
当我尝试为使用以下命令生成的组件添加自动布线时我得到了错误app-routing.module.tsimport
浏览 1提问于2020-03-27得票数 5
1回答
我有一个项目有多个路由模块，这些模块是延迟加载的(见下文)。主插座路由的工作方式就像一个咒语，http://localhost:4200/lists/contacts/new呈现了正确的组件。router-outlet></router-outlet>和动作按钮：
<a [routerLink]="[{ outl
浏览 0提问于2019-12-06得票数 1
我有一个角5 web应用程序，我需要做一个单独的路由在一个单独的组成部分。/app-routing.module'; }home组件有一个命名的路由器出口(home)，用于从我的导航菜单加载内容页因此，每当我单击“帮助”菜单时，它都应该在home.component上的路由器出口上加载，而不是
浏览 0提问于2018-04-06得票数 0
回答已采纳
2回答
我使用的是Angular 5，我有一个app.component版本的。我正在动态地路由到一个特定的组件，比如'dashboard‘。这个仪表板组件有一个命名的router-outlet和一组子组件。现在，我必须通过路由器导航从仪表板组件更改指定的路由器出口的内容。我试过跟随导航
1. this.router.navigate([{ outlets: { right: 'temp1' }}], {redirectTo: this.activatedRoute
浏览 5提问于2018-01-02得票数 4
2回答
我需要使用字符串varible作为外名rr public redirect(): any { let rr2 = 'm/addProduct'; ['link/link', {outlets: {rr: rr2}}]
);
浏览 2提问于2021-09-29得票数 2
回答已采纳
我之前创建了2个页面，它的模块和路由模块是特别的，第三个页面将是前两个的管理角色，处理他们的路由，并导入到应用程序模块。/tab1/tab1-routing.module';import[RouterModule.forChild(routes)],export class MenuAdminRoutin
浏览 29提问于2021-03-23得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
