如何在angular 7中正确实现命名路由器出口？
在Angular 7中，可以通过使用命名路由器出口来实现路由的导航和显示。下面是正确实现命名路由器出口的步骤：
- 在app.module.ts文件中，导入RouterModule和Routes模块：
import { RouterModule, Routes } from '@angular/router';- 在app.module.ts文件中，定义路由配置数组，并为每个路由指定一个唯一的名称：
const routes: Routes = [
{ path: 'home', component: HomeComponent, outlet: 'main' },
{ path: 'about', component: AboutComponent, outlet: 'main' },
{ path: 'contact', component: ContactComponent, outlet: 'main' }
];- 在app.module.ts文件中，使用RouterModule的forRoot方法将路由配置数组应用到应用程序中：
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppModule { }- 在app.component.html文件中，使用router-outlet指令来显示命名路由器出口：
<router-outlet name="main"></router-outlet>- 在其他组件的模板文件中，使用routerLink指令来导航到命名路由器出口：
<a routerLink="/home" routerLinkActive="active" [routerLinkActiveOptions]="{ outlets: { main: ['home'] } }">Home</a>
<a routerLink="/about" routerLinkActive="active" [routerLinkActiveOptions]="{ outlets: { main: ['about'] } }">About</a>
<a routerLink="/contact" routerLinkActive="active" [routerLinkActiveOptions]="{ outlets: { main: ['contact'] } }">Contact</a>以上步骤中，'main'是命名路由器出口的名称，可以根据实际需求进行修改。在路由配置数组中，通过指定outlet属性来将路由与命名路由器出口关联起来。在routerLink指令中，通过设置routerLinkActiveOptions属性来指定命名路由器出口的路径。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云负载均衡（CLB）。
相关·内容
我正在尝试使命名路由工作，但我找不到我做错了什么。 我在angular官方网站和其他网站上尝试了这个教程。我需要有一个导航栏，(由应用程序菜单模拟的时刻)，并命名路由器插座旁边。我的主路由器已用于其他用途 menu.component.html <a [routerLink]="[{ outlets: { main: ['users'] } }]">Users</a> home.component.html我是angular
浏览 12提问于2019-01-27得票数 3
我试图用Angular2实现基本的路由，但没有成功:-D实际上，我甚至没有错误，我只是在页面上什么也没有(这无助于我调试问题^^)。我所做的是：
在主组件的模板中添加一个“路由器-出口”元素。主组件实现"ngOnInit“，并使用路由器将用户重定向到名为"Company”的路由。"/company"，
浏览 3提问于2016-05-16得票数 0
回答已采纳
在使用路由器时，所有教程都表明，我仍然需要定义一个根组件，该组件传递给根模块的bootstrap函数。但是，如果这个根的组件模板仅仅包含<router-outlet>，那么这个根组件的目的是什么？
浏览 3提问于2016-11-17得票数 3
回答已采纳
: PageNotFoundComponent }然后我有一个像这样的PageNotFoundComponent：import {ActivatedRoute} from '@angular/router';
selector: 'app-page-not-found</p>
我有一个有一些路由器链接和<
浏览 6提问于2019-10-03得票数 0
回答已采纳
当我导航到/时，正确的会出现在名为'navbar‘的路由器出口上。但是，当我导航到/app/dashboard时，AppCentralNavbarComponent并没有出现在名为“navbar”的路由器出口上，而是出现了错误：被扔了。<o-body></o-body>
<router-outlet name
浏览 1提问于2017-09-01得票数 0
我如何在angular2：中实现这样的目标？加载的动画->第一页->动画-输出->空路由器出口(组件是加载的)动画->第一页加载->动画-出第一页->动画-进入第二页->第二页加载->这里销毁第一页
浏览 3提问于2016-04-23得票数 5
使用而不是新的Angular2路由器有什么好处和缺点？在过去，我使用有角度1.x的ui路由器，而不是使用ngRoute，因为我需要更好地支持嵌套状态/路由。
那么现在，Angular2呢？你能告诉我内置路由器 of Angular2，新的ui- Angular2 和ngrx路由器之间的区别吗？
浏览 1提问于2016-07-13得票数 47
回答已采纳
1回答
我从许多有声望的网站(如twitter，twitch，facebook)了解到，它们都是授权和非授权用户的根路径。说对于twitter来说，在用户登录之前和之后，url位置指向。Angular路由器似乎只提供静态配置，因此我无法基于canActivate guard中的身份验证逻辑动态创建组件。我所能做的就是导航(例如，登录(‘/this.router.navigate’))到不同的路径，然后angular将实例化相应的组件，但之后我将不再位于根目录中。你知道如何在angular</em
浏览 5提问于2018-01-09得票数 2
我启动了一个新的角5项目，并通过遵循实现了路由，但是页面在路由事件上是刷新的，而不是更新DOM。下面是我对app.module.ts的导入import { NgModule }from '@angular/core';
import { RouterModule, Routes } from '@angular/router&
浏览 0提问于2018-02-22得票数 0
回答已采纳
1回答
出口的角默认路径
、、、
给定以下模块，如何创建路由，以便当应用程序加载此模块时，它将路由到CComponent，并将AComponent加载到指定的路由器出口search-results中import{ BrowserModule } from '@angular/platform-browser';import{ RouterModule } from '@<e
浏览 4提问于2018-01-16得票数 3
2回答
mainRouterOutlet"></div>
是否有可能有一个路由‘/登录’使用outside路由器-出口而忽略默认的路由？是否有可能知道哪个路由器是活动的，所以我可以用一个wrapper指令隐藏ngIf类，并且只有outside路由器-出口是活动的。
浏览 4提问于2016-09-08得票数 0
回答已采纳
1回答
有没有人知道如何在防火墙主机上工作？这一切都工作，但当我看到我的网站的源代码，我只看到路由器-出口，而不是文本，等等。extraProviders: []import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platfor
浏览 0提问于2018-02-28得票数 2
这是一个关于如何用角度2“正确”实现所需功能的概念性问题。我想要实现的是工具栏显示不同的组件，这取决于在内容区域呈现的组件/视图。A)我的第一次尝试是向工具栏中添加另一个(命名) <router-outlet>，并基于静态路由显示工具栏组件。这件事有什么不好的地方：
静态的内容-工具栏关系太松散，对我的口味来说。即使用户导航，
浏览 8提问于2016-12-08得票数 19
我用Angular CLI创建了我的Angular应用，但现在我在路由器上遇到了问题。我要构建的应用程序有一些页面有页眉和页脚，但也有一些页面没有，例如登录页面。第二个想法是使用次要路由，我尝试使用主要出口来定义app.component.html，并为页眉和页脚定义两个次要出口，但之后我无法从功能路由模块访问次要出口。对于我在AngularJS中使用的ui-router，通过命名视图和指定共享父状态的能力，这真的很容易做到。我真的很感激在这里指出正确
浏览 1提问于2017-04-22得票数 2
我有一个nav组件，它是一个处理一些路由切换的菜单，问题是我似乎无法呈现路由的内容，因为我在nav组件模板中没有一个router-outlet。因为我的[routerLink]在这个模板中：<nav class="nav-wrapper" [class.is-toggled]="isToggled" [class.is-hidden]="!isTog
浏览 5提问于2016-01-29得票数 5
回答已采纳
1回答
我正在构建angular2应用程序，目前我有一个家庭组件的菜单和路由器插座的主要内容。当我运行应用程序时，登录页面加载，在成功验证后，它将我路由到主页，但在加载菜单的主页(如Dashboard1、Dashboard2、Report1等)中，链接不能正常工作。/core/bundles/core.umd.js:9091)
我有两个地方的路由器-出口标签，即1在AppLoader
浏览 1提问于2016-07-28得票数 1
回答已采纳
3回答
core-routing.module和core.component的core.module来处理这个问题，但是子组件(例如DashboardComponent)是在app.component.html上的路由器
浏览 0提问于2018-11-22得票数 8
回答已采纳
我尝试了Angular 2路由。
我的应用程序有4个页面和4个路由(r1、r2、r3、r4)。我想将这两组页面分开。r1和r2的"content 1“字段将是相同的。
浏览 0提问于2016-11-22得票数 6
/platform-browser';import { AppRoutingModule } from '._router.navigate([{ outlets: { home: [ routeName ] }}])}
home组件有一个命名的路由器出口(home)，用于从我的导航菜单加载内容页因此，每当我单击“帮助”菜单时，它都应该在home.component上
浏览 0提问于2018-04-06得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
