Angular 9相同的路由路径不同的组件
Angular 9是一种流行的前端开发框架，它采用TypeScript语言，并具有模块化、组件化的开发方式。在Angular 9中，可以使用路由来实现页面之间的导航和路径管理。
对于相同的路由路径但不同的组件，Angular 9提供了一种名为"路由匹配优先级"的机制来确定应该加载哪个组件。当访问一个具有相同路径的路由时，Angular会根据配置的路由规则来决定使用哪个组件。
以下是路由匹配优先级的规则：
- 完全匹配：如果路由路径完全匹配，则加载与该路由路径完全匹配的组件。
- 子路由：如果一个路由路径是另一个路由路径的子路径，则加载子路径对应的组件。例如，路径为"/user"的路由是路径为"/user/profile"的路由的子路由。
- 通配符路由：如果以上两种情况都不匹配，则加载配置的通配符路由组件。通配符路由通常用于处理未知的或不存在的路径。
这种相同路由路径但不同组件的使用场景可以用于实现不同用户角色的权限管理，例如一个网站有管理员和普通用户两种角色，可以使用相同的路径"/dashboard"，但加载不同的组件来展示管理员和普通用户的不同页面。
对于Angular 9，以下是一些相关的腾讯云产品和产品介绍链接地址：
- 腾讯云服务器：腾讯云提供的云服务器实例，可用于托管和运行Angular 9应用。链接地址：https://cloud.tencent.com/product/cvm
- 腾讯云对象存储（COS）：腾讯云提供的对象存储服务，可用于存储Angular 9应用中的静态资源文件。链接地址：https://cloud.tencent.com/product/cos
- 腾讯云内容分发网络（CDN）：腾讯云提供的全球加速服务，可加速Angular 9应用的访问速度。链接地址：https://cloud.tencent.com/product/cdn
- 腾讯云云数据库MySQL版：腾讯云提供的高性能云数据库服务，可用于存储Angular 9应用的数据。链接地址：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云云原生容器实例（TKE）：腾讯云提供的云原生容器服务，可用于部署和管理Angular 9应用的容器。链接地址：https://cloud.tencent.com/product/tke
请注意，以上产品仅为示例，你可以根据实际需求选择合适的腾讯云产品来支持你的Angular 9应用的开发和部署。
相关·内容
1回答
无法激活已激活的出口角6
、、、、
我的项目目前使用了2个模块-- indexModule和Sign-In module。问题是，当我调用加载了lazyloaded的模块并向它添加出口名时，它会显示一个问题。
无法激活加载的出口
//索引模块
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {NavbarComponent} from './02_navbar_component/navbar.component';
浏览 0提问于2018-10-08得票数 0
2回答
我对angular (确切地说是angular 9)是个新手。我希望有人能给我指引正确的方向。
我有5个图像垂直放置在另一个在左手边和在中间，我必须更新基于我将点击的图像的内容。在中间，根据我要点击的图像，可能会有任意数量的字段。有人能指导我如何做到这一点吗？
这是我想要的：
浏览 0提问于2020-03-10得票数 1
1回答
我的案例也有类似的问题，我已经读过了，但我仍然不得不问。
我正在开发一个应用程序，它现在有这样的结构：
我有一个带有一个路由器插座和这个路由声明的主应用程序组件：
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AuthRootComponent } from './auth/authroot/authroot.component';
import { StartLayou
浏览 5提问于2021-09-23得票数 1
在路由'‘(主页)，我的AppComponent的html正在加载两次。
main.ts
import { bootstrap } from '@angular/platform-browser-dynamic';
import { enableProdMode, NgModule } from '@angular/core';
import { AppComponent } from './app/components/app/app.component';
import { APP_ROUTER_PROVIDERS } from &#
浏览 1提问于2016-08-15得票数 2
回答已采纳
根据angular2的最终版本，路由可以按以下方式定义：
无组件路由：，它将实例化URL，而不关心组件
空路径路由：，它将实例化组件，而不关心URL。
是那么回事吗？有人能给我一个详细的例子让我有更好的洞察力吗？
提前感谢！
浏览 3提问于2016-09-28得票数 2
2回答
深嵌套组件不显示
、、
我在显示第三个嵌套组件时有问题。
预期：
Hello组件
你好鸟巢-一个组件
你好Nest-1组件
Hello Z组件
实际：
Hello组件
你好鸟巢-一个组件
你好Nest-1组件
为什么我的Test组件没有显示？
TLDR；
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/for
浏览 0提问于2019-08-28得票数 2
回答已采纳
目前我正在尝试使用Angular 9创建一个名为products的模块，其路径为localhost:4200/products，对于查找指定的产品，我使用此路径)
每次我需要看到一个产品的时候，我都想实现这个组件。我的问题是，当我使用路由器链接( to )从当前产品页面转到另一个产品时，url会改变，但内容页面不会改变，并保持上一个产品的相同信息。
我不知道路由器链路重定向是怎么回事
我的代码.ts
import { Component, OnInit } from '@angular/core';
import { Product } from 'src/app/s
浏览 3提问于2020-09-06得票数 1
我很新的角度，我正在设置一个项目的前端在角8，最终将使用REST来显示数据。目前，我已经创建了2个自定义组件。
LoginComponentHomeComponent
当我单击登录按钮时，我的目标只是被从HomeComponent html从LoginComponent html重定向到。
LoginComponent和HomeComponent都位于相同的目录级别。
以下是文件的内容。
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { N
浏览 5提问于2021-08-30得票数 4
回答已采纳
2回答
我用Angular7做了一个Angular应用，我尝试使用两个"router-outlet“标签，例如我有两个组件"main”和"main2"，它们是半相同的，它们被路由在一个父组件中，我想将它们的差异路由到两个子组件中，这是可能的吗?您有什么方法可以探索一下吗?谢谢;)
浏览 26提问于2019-07-04得票数 0
回答已采纳
我正试图把一个演示应用程序的角2 + Rx.JS 5/Next。
我注意到每次切换路由时都会重新实例化我的组件。
下面是根应用程序的代码：
import {bootstrap} from 'angular2/platform/browser';
import {HTTP_PROVIDERS} from 'angular2/http';
import {ROUTER_PROVIDERS} from 'angular2/router';
import {AppComponent} from './app.component.ts'
浏览 5提问于2016-04-26得票数 14
回答已采纳
我的问题是，子路由器不工作。应用程序模块加载DashboardModule (并且标题也将显示)。问题从这里开始。报头中的路由器链路不想加载其他组件。我想要什么？路由器链路显示路由器插座之间的"sub“组件。谢谢你的帮助。
app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule, ExtraOptions } from '@angular/router';
import { LoginComponent }
浏览 0提问于2017-10-26得票数 1
2回答
我有一个关于Angular 2路由器使用3.0.0-rc.1版本的小问题，我想根据用户角色导航到不同的主组件，如AdminComponent或UserComponent。有没有人可以帮我修改一下下面的路线，这样我就可以实现想要的功能了？
{path: 'login', component: LoginComponent}, // <--- This redirects to '/' in case user is logged in
{
path: '',
component: HomeComponent,
浏览 0提问于2016-08-29得票数 7
1回答
我一直在根据几个线程和教程来修改这个问题，但似乎没有一个能解决这个问题。我有一个小应用程序是从文件系统，而不是通过HTTP加载。无论我如何调整设置，index.html#/character或index.html#character都将始终路由到AppComponent，而不是CharacterComponent。如果我将app.module.ts中的引导程序从AppComponent更改为CharacterComponent，它将显示字符。我有一种感觉，我只是丢失了一部分路由配置，它将正确地在组件之间进行路由。
版本
"devDependencies": {
&#
浏览 3提问于2016-11-22得票数 1
回答已采纳
我有一个渲染一些子路由集的component，但布局不同-我们是否可以为两个布局使用相同的路径名，如下所示 {
path: '',
component: LandingComponent,
children: [
{ path: '', component: LandingpageComponent },
{ path: 'landingpage', component: LandingpageComponent },
]
},
{
path: '',
浏览 19提问于2019-02-08得票数 1
回答已采纳
我在我的应用程序的根路由模块中使用了以下路由：
const routes: Routes = [
{
path: '',
children: [
{
path: 'home',
component: HomeDetailsComponent,
},
{
path: 'home',
component: HomeDetailsComponent,
children: [
{
浏览 1提问于2017-02-01得票数 0
我正在使用用户名和密码进行正常登录，管理员和admin.In登录组件导航到layout.But我收到类似于"core.js:1448错误错误:未捕获(in promise)：错误:无法匹配任何路由。URL段：'layout'".please帮助我这样的错误。
app.routing.module.ts
import {NgModule} from '@angular/core';
import {RouterModule} from '@angular/router';
@NgModule({
imports:
浏览 0提问于2018-04-03得票数 0
3回答
我有两个组件在我的角度应用程序(家庭和登录)。登录是默认页面，一旦登录，我想导航到主页。
我有一个app.router.ts，它看起来像:-
import { LoginComponent } from './login/login.component';
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AppComponent } from './a
浏览 0提问于2017-05-30得票数 1
4回答
使用角2rc.1和TypeScript。当组件加载到子路由中时，我在将路由参数传递给组件时遇到了很多困难。我使用@angular/router-deprecated包。
在我的根组件中，我将路由配置为：
@RouteConfig([
{path:'/top', name:'Top', component: EndPointComponent},
{path:'/sub/...', name:'Sub', component: MiddleManComponent}
])
下面是端点组件，在这里我尝试读取参数
import
浏览 7提问于2016-05-24得票数 5
回答已采纳
我跟踪/克隆了这个
在我的项目中，我输入：ng generate route task，然后得到这个错误。
无效蓝图:路线
我搜索的堆叠溢出，只有两个与我的遗赠相关的帖子，但没有找到有用的答案。
这是我的package.json：
{
"name": "angular-starter",
"version": "6.0.0",
"description": "An Angular Webpack Starter kit featuring Angular (Router, Http, F
浏览 4提问于2017-07-16得票数 0
对不起，我对角2还不熟悉，我已经做了我的研究，但仍然不知道路由是如何工作的。下面是我的路由配置：
export const appRoutes: Route[] = [
{
path: '',
component: SiteLayoutComponent,
children: [
{
path: '',
pathMatch: 'full',
component: HomeC
浏览 4提问于2016-10-05得票数 1
回答已采纳
1回答
带有辅助路由的解析器
、、、
我的新Angular有一个带有3个小部件的仪表板。对于一个小部件(PreviousInquiriesComponent)，我想添加一个解析器，以便该小部件在数据准备就绪之前不会显示。
children: [
{
path: '',
component: ProfileComponent,
outlet: 'outlet1'
},
{
path: '',
component: PreviousInquiriesComponen
浏览 18提问于2020-06-12得票数 0
我有一个Angular应用程序，其结构如图所示：
要根据从服务器检索到的数据有条件地选择其中一个主题。
const routes: Routes = [
{
path: '',
loadChildren: 'app/presentation/theme1/theme1.module#Theme1Module',
canActivate: [Theme1Guard],
},
{
path: '',
loadChildren: 'app/presentation/theme2/th
浏览 0提问于2018-04-13得票数 4
我对angular routing有一个问题。它是一个遗留的Angular 6应用程序。我的路由定义如下 Routes = [
{ path: '', component: DashboardComponent,pathMatch: 'full', canActivate: [AuthGuardService]},
{ path: 'seller', component: SellerComponent},
{ path: 'logout',component: LogoutComponent}
] 在app.module
浏览 7提问于2021-05-05得票数 1
我的路线有点问题，我需要一点帮助。最初，我的所有路由都在一个app.routing.ts文件中。目前，我正在将我的路由重构为一个文件，以便与其相应的功能模块一起被延迟加载。一个延迟加载的功能模块使用辅助辅助路由器出口。这是我的密码..。
原件: app.routing.ts
const appRoutes: Routes = [
{
path: 'settings',
component: SettingsComponent,
children: [
{
path: '&
浏览 1提问于2017-07-29得票数 1
回答已采纳
在创建Angular 7应用程序时，我定义了一个用于不同实体的表单组件。 为此，我创建了一个变量路由： {path: ':entity/create', component: FormComponent} 这项工作很好，但根据我想要创建的实体，我必须加载不同的对象。 所以我尝试在Angular中使用变量类名来实例化一个类。 我试着去做： var object = eval('new myObject()'); 但是我得到了这个错误信息： ERROR Error: "Uncaught (in promise): ReferenceError: myO
浏览 11提问于2019-03-21得票数 3
我使用的是Angular 2 rc4，并使用了如下所示的新路由
const routes: RouterConfig = [{
path: '',
component: PublicLayoutComponent,
children: [
{ path: '', component: HomeComponent},
{ path: 'login', component: LoginComponent}
]
}]
对于这段代码，我无法访问路由/login，我只是想知道出了什么问题，它总
浏览 6提问于2016-08-09得票数 9
我创建了一个angular 2模块，并成功地将其路由到“dashboard”。我想用我的模块替换默认的jHipster主页，但是我似乎不能让它工作。为了将它们替换为不同的模块，我需要了解home路由或home组件或路由是否有什么特殊之处？
顺便说一句，我想使用jHipster作为我的angular2/webpack/spring-boot应用程序的基础，但我在找到所有这些细节的文档时遇到了麻烦。推荐一份完整的参考文献(如果有的话，将不胜感激)
蒂娅！
浏览 7提问于2017-02-22得票数 2
我想运行注册页面
首先创建注册页，然后键入ng serve命令，但不显示注册页。
我在地址栏上手动写
但没有显示任何页面
registration.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-registration',
templateUrl: './registration.component.html',
styleUrls: ['./registration.compone
浏览 4提问于2020-08-19得票数 0
回答已采纳
谁能告诉我，我是否可以在angular2+中实现这一点。
<app-list-table [list]="myList">
<app-list-column name="'Name'"></app-list-column>
<app-list-column name="'Direction'"></app-list-column>
</app-list-table>
浏览 3提问于2018-02-01得票数 0
我有两个不同的路由/a和/b使用相同的组件。当从/a导航到/b时，我希望能够检索/a中使用的组件实例的状态，以便在/b中重用它。
我在上读到，使用Angular“自定义路由重用策略”是可能的，也将是可能的。我想知道是否可以使用当前的？这是因为当返回到相同的url时重用组件似乎很容易，但是当使用相同的组件转到不同的url时则不容易。
浏览 1提问于2017-05-18得票数 0
1回答
我想在一个Angular应用程序中创建一个导航，在那里我可以从多个“父”页面访问同一个页面，并让导航知道它来自哪个页面。
我在我的导航上使用routerLinkActive="active"。我有两个显示用户列表的页面(收藏夹、所有用户)。用户有一个详细信息页面，您可以使用users/userId导航到该页面。
我想要做的是，当从“收藏”列表中单击用户详细信息链接时，“活动”导航停留在“收藏”菜单按钮上，而当我从所有用户中单击时，它停留在所有用户上
这就是我的路径当前的配置方式
const routes: Routes = [
{
path: 'favorites&
浏览 17提问于2019-07-25得票数 0
回答已采纳
我对这个话题还是个新手。在我的linuxmint17中，我尝试使用Angular CLI创建Firebase web应用程序。它问我关于Angular routing的问题。
什么是Angular routing？我该怎么回答呢？
浏览 1提问于2019-03-03得票数 69
1回答
我正在开发一个Angular 2应用程序，我做了一个路由器来浏览这个应用程序。虽然它将成功地转到正确的urls，但它实际上不会呈现除AppComponent以外的任何组件的html。
route.module.ts
import { DashboardComponent } from './dashboard/dashboard.component';
import { LoginComponent } from './login/login.component';
import { NgModule } from '@angul
浏览 12提问于2017-07-27得票数 1
回答已采纳
我已经实现了延迟加载，但从那以后，它使我的应用程序太慢，只要一点击，我的应用程序就不会导航到其他页面了。当需要执行任何操作时，需要2次单击。
loaninfo.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LoaninfoRoutingModule } from './loaninfo-routing.module';
import { LoaninfoComponent }
浏览 4提问于2022-11-10得票数 0
6回答
我正在构建一个网页，从一个简单的登录框开始，其中包含用户名、密码和输入框，以及两个带有名称登录和注册的按钮。
单击登录按钮后，我的页面应该路由到另一个包含导航条的组件。有路线，没问题。但是登录框在路由后不会消失。
因此，在路由之后，导航栏就会出现，但是登录框仍然存在。
APP.COMPONENT.HTML
<div class="background-image">
<router-outlet></router-outlet>
<div class="content2"
浏览 1提问于2019-06-12得票数 2
回答已采纳
2回答
我一整天都在试图找出如何以角9加载一个新页面，就像单击时一样，您可以看到您正在被重定向到一个新页面。我见过以下的相关链接，但没有一个解决了我的问题：
我已经成功地实现了一种不需要的行为，在这种行为中，组件被加载在同一个页面上，而不是在一个新页面上。
这是我的app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angul
浏览 3提问于2020-05-09得票数 0
1回答
在Angular2中，是否可以显示，只需在浏览器中路由，而不使用任何Angular2组件？RouterModule.forRoot中的某种忽略
浏览 1提问于2016-12-26得票数 1
回答已采纳
2回答
我正在让登录组件加载，但当我按下登录按钮时，url更改为Dashboard，但没有发生其他任何事情，因此我看不到控制台或任何其他方面的错误，因此我无法诊断问题。我确信这很简单，但是没有错误，我不知道该怎么办？
导航：
public onLogin(value: any) {
this.router.navigateByUrl('/dashboard')
// this.loginService.onLogin(value)
// .subscribe(
// value => {
// console.log('[POST] log
浏览 3提问于2018-05-04得票数 2
回答已采纳
1回答
我正在构建angular2应用程序，目前我有一个家庭组件的菜单和路由器插座的主要内容。我已经添加了登录机制，所以如果用户没有经过身份验证，那么登录页面将显示在整个屏幕上，登录后，用户将被路由到主/主组件，具有上面的结构。
当我运行应用程序时，登录页面加载，在成功验证后，它将我路由到主页，但在加载菜单的主页(如Dashboard1、Dashboard2、Report1等)中，链接不能正常工作。当我点击任何菜单链接时，我会得到下面提到的错误。
lib/@angular/platform-browser/bundles/platform-browser.umd.js:1900 Error
浏览 1提问于2016-07-28得票数 1
回答已采纳
4回答
我尝试从angular2 (从服务器获取路由配置)动态构建路由，然后解析它并为组件路由生成指令(我将父路由配置和子路由设置为不同的组件，因为我不知道如何将子组件的路由定义为一个main.app.ts文件)。
问题是，当应用程序启动并尝试创建路由配置，而routeGenerator还没有构建路由(异步延迟)时，t parse routes data (because async delay, so routesData undefined now) and app is crashig. I don不知道该如何处理。寻找生命周期(一些类似于- @Angular2BeforeAppStar
浏览 0提问于2016-04-05得票数 8
回答已采纳
在我们angular2 Typescript应用程序中，我们使用路由器。我们的组件是非常通用的，它们的行为根据它们从路由器获得的参数而发生巨大的变化。
这个应用程序处于早期开发阶段，我所指的行为最近已经被观察到了。我不确定是因为代码中的更改还是某个库中的破坏性更改。
考虑一个名为List的组件。它从上下文(路由、包装组件等)中获取一些信息，比如它应该显示的实体类型。
现在，当我更改路由时，List组件不会重新实例化，但其参数会更新。由于我在ngOnInit中使用这些参数来设置组件，因此以后的更改将不起作用。
我知道我可以使用变更检测来解决这个问题，但我不想这样做。原因是，这将使开发人员更容易引
浏览 0提问于2016-10-15得票数 3
我创建了一个新的Angular 10应用程序，并创建了两条路线。然而，似乎Angular将每个请求都匹配到了第一个路由，我不知道为什么。如果我只创建了一个'/login‘路由并试图在我的浏览器中访问它，那么Angular也不会获得它。看起来Angular不能正确映射路由器？
这是我的app.module.ts文件
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
AngularFireModule.initialize
浏览 0提问于2020-07-05得票数 0
4回答
我有一个关于Angular 5中路由的问题。我想创建一个子路由，但是当我输入url (表示子路由)时，父组件被加载。我的路由：
path: 'user-admin/:id',
component: UserAdminComponent,
},
children: [
{
path: '',
component: UserAdminComponent,
pathMatch: 'full'
},
{
path: "final-exams",
component: FinalExams
浏览 0提问于2018-03-02得票数 3
1回答
我只是试图链接，当我点击一个对象在我的家庭组件，它带来了我的播放器细节组件。我发送方法时，所有的数据都被正确发送，但它只是附加到url，而不是实际地转到新页面本身。
我也不知道我应该把它放在哪里，因为如果我在任何组件中都有它，它就会不断地尝试呈现播放器详细信息页面。
app-routing.module
import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { PlayerDetailComponent }
浏览 0提问于2019-05-05得票数 1
回答已采纳
注意到新发布候选(RC)路由器在@Routes装饰器中不包含“name”param。然而，angular.io上的文档在用RC路由器描述路由时清楚地提到了“名称”。这只是文档的复制/粘贴问题，还是有意将“名称”param添加回混合文档中？
如果'name‘param永远消失了，那么有什么理由，是否有任何文档来澄清被废弃的路由器和RC路由器之间的区别？
(RC)路由器示例：
@Routes([
{path: '/crisis-center', component: CrisisListComponent},
{path: '/
浏览 3提问于2016-05-20得票数 3
回答已采纳
我们正在处理一个具有公共/受保护区域的站点，其中页眉和页脚是不同的。 /src
/app
app.module.ts
app-routing.ts
app.component
/pub
pub.component.ts
pub-routing.module.ts
pub.module.ts
/aboutus
aboutus.component.ts
/priv
priv.compo
浏览 14提问于2021-08-19得票数 0
回答已采纳
我最近开始学习angular2，我正在开发一个简单的导航网络应用程序。我想按下导航菜单中的一个选项，一个div将根据用户的选择使用不同的html文件进行更新。
最后那部分我有麻烦了。
这是我的页面布局：
+-----------------------------------------------------------+
| header |
+-----------------+-----------------------------------------+
|
浏览 2提问于2016-11-11得票数 0
回答已采纳
1回答
我面临一个关于angular2路由的问题。这是我的package.json，最新版本的角2.0.0-rc.4。
当我用example.com/admin/打开我的url时，它可以工作，并显示登录页面。这没什么。然后，我填写了正确的电子邮件和密码，它用同样的方式在dashboad上运行。
package.json
{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
"lite": "lite-s
浏览 1提问于2016-07-12得票数 0
回答已采纳
1回答
我是angular的初学者，我参加了一次培训，我进入了路由系统，我通过命令ng g m routes --routing创建了路由系统，我声明了路由，我通过<router-outlet></router-outlet>更改了标记<home></home>，没有什么值得展示的。
home.component.html
<sliders [rowOfSliders]="rowSliders"></sliders>
<div class="container">
<h2
浏览 2提问于2022-03-04得票数 -1
回答已采纳
14回答
在Angular 2路由中可以有一个可选的路由参数吗？我在RouteConfig中尝试了Angular 1.x语法，但收到以下错误：
“原始异常:路径”/用户/:id？“包含"?”，这在路由配置中是不允许的。“
@RouteConfig([
{
path: '/user/:id?',
component: User,
as: 'User'
}])
浏览 108提问于2015-12-11得票数 233
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
