Angular路由:路径作为字符串数组的多个出口
创始人
2024-10-28 06:01:11
0

在Angular中,你可以使用字符串数组来定义多个出口。以下是一个示例:

首先,你需要在app.module.ts文件中导入所需的模块:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home.component';
import { AboutComponent } from './about.component';
import { ContactComponent } from './contact.component';

const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
    outlet: 'primary' // 设置主要出口
  },
  {
    path: '',
    component: AboutComponent,
    outlet: 'secondary' // 设置次要出口
  },
  {
    path: 'contact',
    component: ContactComponent,
    outlet: 'secondary' // 设置次要出口
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

然后,在app.component.html文件中添加出口标记:



最后,在app.component.ts文件中添加路由链接:

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  template: `
    Home
    About
    Contact
  `
})
export class AppComponent {
  constructor(private router: Router) { }
}

这样,当你点击链接时,不同的组件将会通过不同的出口渲染到页面中。

希望以上内容对你有所帮助!

相关内容

热门资讯

一分钟揭秘!四川熊猫辅助器,闲... 一分钟揭秘!四川熊猫辅助器,闲逸辅助插件,详细方法(有挂教程)1、首先打开四川熊猫辅助器辅助器下载最...
一分钟教你!大菠萝免费辅助,手... 一分钟教你!大菠萝免费辅助,手游蛮王辅助,详细技巧(有挂秘笈)1、实时大菠萝免费辅助透视辅助更新:用...
玩家爆料!天天贵阳辅助工具,对... 玩家爆料!天天贵阳辅助工具,对战互娱辅助系统,详细方法(有挂辅助)1、任何天天贵阳辅助工具透视是真的...
玩家必看秘籍!决战卡五星辅助器... 玩家必看秘籍!决战卡五星辅助器下载,山西扣点点辅助,详细方法(有挂方略)决战卡五星辅助器下载透视方法...
玩家必看科普!奇迹免费脚本辅助... 玩家必看科普!奇迹免费脚本辅助工具,腾讯欢乐卡五星辅助器,详细神器(有挂总结)1、腾讯欢乐卡五星辅助...
一秒答解!皮皮游戏辅助平台,火... 一秒答解!皮皮游戏辅助平台,火神大厅辅助器,详细工具(有挂细节)1、皮皮游戏辅助平台公共底牌简单,皮...
我来分享!摸一把麻将辅助,赣南... 我来分享!摸一把麻将辅助,赣南好友辅助,详细挂(有挂功能)我来分享!摸一把麻将辅助,赣南好友辅助,详...
玩家实测!微信小程序蜀山四川辅... 您好,微信小程序蜀山四川辅助器这款游戏可以开挂的,确实是有挂的,需要了解加去威信【136704302...
一分钟教你!微友助手破解版,广... 一分钟教你!微友助手破解版,广东雀神辅助器透视,详细挂(有挂攻略);1、广东雀神辅助器透视辅助器安装...
一分钟揭秘!茶馆游戏辅助,湖北... 一分钟揭秘!茶馆游戏辅助,湖北卡五星插件,详细神器(有挂秘籍)1、这是跨平台的湖北卡五星插件轻量版有...