首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用路由器链接创建多级菜单,该菜单在单击angular 2中的任何路由项目后不会关闭

在Angular 2中,可以使用路由器链接创建多级菜单,并且在单击菜单项后不会关闭菜单。下面是一个完善且全面的答案:

在Angular 2中,可以使用路由器链接创建多级菜单,并且在单击菜单项后不会关闭菜单。多级菜单通常用于展示复杂的导航结构或者层级关系。下面是一种实现多级菜单的方法:

  1. 首先,需要在Angular应用中配置路由器。可以使用@angular/router模块来实现路由功能。具体的路由配置可以参考Angular官方文档。
  2. 在HTML模板中,可以使用Angular的内置指令*ngFor来循环渲染菜单项。例如:
代码语言:html
复制
<ul>
  <li *ngFor="let item of menuItems">
    <a [routerLink]="item.route">{{ item.label }}</a>
    <ul *ngIf="item.children">
      <li *ngFor="let childItem of item.children">
        <a [routerLink]="childItem.route">{{ childItem.label }}</a>
      </li>
    </ul>
  </li>
</ul>

上述代码中,使用*ngFor指令循环渲染菜单项,[routerLink]指令用于设置路由链接。如果菜单项有子菜单,可以使用*ngIf指令来判断是否显示子菜单。

  1. 在组件中,需要定义菜单项的数据结构,并在初始化时加载菜单数据。例如:
代码语言:typescript
复制
export class MenuComponent implements OnInit {
  menuItems: MenuItem[];

  ngOnInit() {
    this.menuItems = [
      {
        label: '菜单项1',
        route: '/menu1',
        children: [
          {
            label: '子菜单项1',
            route: '/menu1/child1'
          },
          {
            label: '子菜单项2',
            route: '/menu1/child2'
          }
        ]
      },
      {
        label: '菜单项2',
        route: '/menu2'
      }
    ];
  }
}

上述代码中,定义了一个MenuItem接口,包含labelroutechildren属性。在ngOnInit方法中,初始化了菜单项的数据。

  1. 最后,需要在路由模块中配置对应的路由。例如:
代码语言:typescript
复制
const routes: Routes = [
  { path: 'menu1', component: Menu1Component },
  { path: 'menu1/child1', component: Child1Component },
  { path: 'menu1/child2', component: Child2Component },
  { path: 'menu2', component: Menu2Component }
];

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

上述代码中,配置了四个路由,对应了菜单项的不同路由路径。

通过以上步骤,就可以在Angular 2中创建一个多级菜单,并且在单击菜单项后不会关闭菜单。当用户点击菜单项时,会触发路由导航,加载对应的组件内容。

对于Angular 2的路由器链接创建多级菜单的更详细信息,可以参考腾讯云的Angular文档:Angular开发文档

请注意,以上答案中没有提及亚马逊AWS、Azure、阿里云、华为云、天翼云、GoDaddy、Namecheap、Google等流行的云计算品牌商。如果需要了解这些品牌商的相关产品和服务,可以参考它们各自的官方文档和网站。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

AngularDart 4.0 高级-路由概述 顶

它可以将浏览器URL解释为导航到客户端生成视图指令。它可以将可选参数传递给支持视图组件,以帮助确定要呈现具体内容。您可以将路由器绑定到页面上链接,并在用户单击链接时导航到适当应用程序视图。...设置概述 添加angular_router 路由器功能位于angular_router库中,库自带软件包。...在任何使用路由器功能Dart文件中,导入路由器库: import 'package:angular_router/angular_router.dart'; 注册提供者和列表指令 如果您已经熟悉Angular...配置 当浏览器URL更改时,路由器会查找相应RouteDefinition,从中可以确定要显示组件。 直到您配置它,路由器才有路由。 以下示例创建一些路由定义。...它演示了同时创建路由器使用应用于路由器宿主组件@RouteConfig添加路由首选方式: lib/app_component.dart (routes) @Component( selector

6.1K20

AngularDart4.0 英雄之旅-教程-07路由

更新pubspec 使用Angular路由angular_router)启用导航。 由于路由器在自己包中,首先将该包添加到应用pubspec: ?...'; 使路由器可用 要告诉Angular应用使用路由,请在应用引导程序功能中指定ROUTER_PROVIDERS:web/main.dart import 'package:angular/angular.dart...你已经完成了应用程序路由。 您没有向模板添加英雄详情链接,因为用户单击导航链接不是为了查看特定英雄; 而是点击一个英雄名字,不管名字是显示在仪表板还是英雄列表中。...要在其他地方导航,用户可以单击AppComponent中两个链接之一,或单击浏览器后退按钮。...你走过路 以下是您在此页面中所取得成果: 您添加了Angular路由器来浏览不同组件。 您了解了如何创建路由器链接来表示导航菜单项。 您使用路由器链接参数导航到用户选择英雄细节。

17.6K30
  • 教程|在 Angular 4 中加载功能模块(下)

    Currency 模块配置完全相同。 当路由器导航到更新地址时,它会使用 loadChildren 字符串动态加载 WeatherModule 或 CurrencyModule。...请注意,Weather 有 3 个子菜单。 保存文件内容,然后发出命令 ng serve 来运行应用程序。 图 9. 应用程序正在运行 ? 现在检查执行 ng serve 命令应用程序输出。...单击 Weather,然后单击 Weather 子菜单一个菜单项。...练习 3:预加载 除了等待用户调用辅助模块路径,有时预先加载这些模块更高效。在这种情况下,在贪婪加载主要模块路由器开始预加载标有 loadChildren 属性所有剩余模块。...x.chunk.js 和 y.chunk.js 文件应紧接着主应用程序被加载,使辅助模块在用户单击这些菜单之前就已可用。

    2.3K10

    Blazor 中路由路由模板

    在客户端上,路由器参与多种情况,最常见情况是用户单击链接、表单上提交按钮或下拉列表中触发服务器调用项。路由器绑定到内部位置更改事件,并从客户端处理导航到新请求路径整个过程。...最后结果就是,Blazor 路由器目前仅提供作为客户端路由器基本功能。例如,它不具备检查路由授权和创建在位置更改时执行视图转换链接功能。...与 Angular 路由器不同,它在获取路由参数无法异步运行解析步骤。最后,Blazor 路由器不支持条件重定向到备用路由 - 这也是 Angular 路由器可以做到。...对于具有约束路由任何无法成功转换为指定类型参数值都会使匹配失效,并且无法识别该路由。 更智能链接和编程 URL 导航 在 Blazor 应用程序中,欢迎你使用定位标记来创建指向外部内容链接。...但是,当定位标记用于呈现菜单或导航栏时,可能需要一些额外工作来调整 CSS 样式以反映链接状态。 内置 Blazor NavLink 组件可以用于任何需要定位点元素地方,尤其是在菜单中。

    8.4K21

    如何使用WijmoJS 纯前端设计器,快速生成 Angular 应用

    在HTML文件中,它在代表WijmoJS纯前端控件每个标记上方插入CodeLens链接单击链接可在单独选项卡中打开Wijmo Designer,并根据关联标记对其进行初始化。...用户在设计器中进行更改,只需单击一下,就可以使用修改Angular标记更新原始HTML文件。...例如,您可以使用IntelliSense为新控件创建Angular标记,然后使用可视化设计器编辑标记。...在我们示例中,操作是在单独选项卡中打开设计图面,并使用 Angular标记提供上下文,以及源文件中标记位置。 现在单击链接以在相邻选项卡中打开设计器。...使用Themes命令可以查看选择不同WijmoJS 主题效果,尽管这对生成代码没有影响,代码仅由控件标记组成。 让我们用趋势线创建一个图表控件。

    5.4K40

    如何使用纯前端控件集 WijmoJS 中可视化在线设计器

    设计表面现在看起来像这样: 要折叠主菜单,请再次单击WijmoJS 徽标,或单击设计图面内部任何位置(“编辑”工具栏下方区域)。...在“属性”窗格中向下滚动,找到系列属性,然后单击“显示项目”按钮将其展开。 将鼠标悬停在最新价格上,然后单击出现链接。...单击后退按钮返回FlexChart设置,然后像以前一样展开系列属性。 现在单击“添加项目链接以将新图表系列添加到集合末尾。...单击新添加项目右边缘向下箭头,然后从可用系列类型列表中选择TrendLine。 新添加项目现在显示为[趋势线]。 将鼠标悬停在括号内文本上,然后单击出现链接。...您可以使用自己绑定替换默认系列以生成代码,但设计人员不会绘制任何数据点。

    5.9K20

    MapTool: 一款强大、灵活RPG虚拟桌面工具

    实际上,RPTools网站最近链接到插画师Devin Night网站ImmortalNights,网站免费提供和购买了100多个标记。...在MapTool窗口右上角属性框中调整 Grid Size 像素值 。 4. 完成单击属性框关闭”按钮。 您可以使用“编辑”菜单“首选项”设置来设置默认网格大小。...通常,您可以通过Web浏览器访问家庭路由器路由器地址通常印在路由器底部,并且以192.168或10开头。...使用获得Internet服务时提供凭据登入到路由器地址,它通常和使用数字密码admin一样简单(有时此密码也印在路由器上)。 如果您不知道登录名,请致电您互联网供应商并询问详细信息。...不同路由器对同一事物使用不同术语。要查找关键字是端口转发,虚拟服务器和防火墙。无论您路由器叫什么,您都可以接受来自路由器端口51234流量,并将该流量转发到个人PCIP地址同一端口。

    5.4K40

    Windows 7 操作系统

    单击左上角应用程序图标,会打开窗口中应用程序控制菜单使用菜单也可以实现最小化、最大化和关闭等功能。  拖动标题栏可以拖动窗口,还可以双击标题栏完成窗口最大化和还原切换。  ...•            快捷方式是到计算机或网络上任何可访问项目 •            通常快捷方式可以放计算机中任意位置 •            删除快捷方式,初始项目仍存在磁盘 •            ...(2)单击“任务栏和[开始]菜单属性”对话框“[开始]菜单”选项卡,单击“自定义”按钮,可以自定义链接、图标和菜单在[开始]菜单外观和行为。...在桌面上放置快捷方式方式如下:  打开“Windows资源管理器”,选定要创建快捷方式项目,如文件、程序、文件夹、图片等,单击菜单“文件”→“创建快捷方式”命令,可以创建相应开解方式,然后将快捷方式图标从...也可以右击选中项目,在快捷菜单单击“发送到”→“桌面快捷方式”命令,或者用鼠标右键将项目拖到桌面上,然后单击“在当前位置创建快捷方式”选项。

    37530

    基于 qiankun 微前端最佳实践(万字长文) - 从 0 到 1 篇

    我们先使用 vue-cli 生成一个 Vue 项目,初始化主应用。 vue-cli 是 Vue 官方提供脚手架工具,用于快速搭建一个 Vue 项目。...我们先在主应用中创建微应用承载容器,这个容器规定了微应用显示区域,微应用将在容器内渲染并显示。...micro-app 在新建项目完成,我们创建几个路由页面再加上一些样式,最后效果如下: ? micro-app ?...先创建一个 React 项目,在命令行运行如下命令: npx create-react-app micro-app-react 在项目创建完成,我们在根目录下添加 .env 文件,设置项目监听端口...我们以 实战案例 - feature-inject-sub-apps 分支 为例,我们在主应用同级目录(micro-app-main 同级目录),使用 @angular/cli 先创建一个 Angular

    6.7K40

    什么是IP冲突?以及如何解决?

    除非你路由器出现故障,否则两台设备永远不应在此系统下获得相同 IP 地址。你路由器知道哪些 IP 地址已经在使用中,并且不会两次提供它们。...单击菜单更改适配器选项,然后在出现窗口中双击网络连接名称。此过程将带你浏览几个不同对话框。 在状态窗口中,单击属性,然后双击Internet 协议版本 4。...在终端窗口中,键入以下命令以放弃你当前 IP,然后按Enter: 之后,使用以下命令从路由器获取新 IP 地址: 此过程应通过从受影响设备之一中删除重复 IP 地址来解决任何 IP 冲突。...你应该会看到刚刚输入 IP 及其旁边 MAC 地址。 更新你路由器固件 有故障路由器可能会导致 IP 冲突更频繁地发生,并且不会发出警告。...如果在执行上述故障排除仍然出现 IP 地址错误,则应更新路由器固件。 具体步骤也取决于你拥有的路由器。通常,当你登录路由器管理面板时,你会发现固件更新选项。这可能在“高级”或“工具”菜单下。

    5.9K30

    为什么我 Mac 运行缓慢以及如何使用CleanMyMac X修复它

    数学很简单:数字越大,他们使用内存就越多。 单击窗口左上角“x”图标可关闭那些使用量大应用程序或进程。不要删除任何你不知道东西——它可能是一个重要系统进程!...修复因过热导致 MacBook Air 或任何其他型号运行缓慢最佳方法是关闭您当前未使用所有选项卡。为您需要页面添加书签,稍后再回来查看它们。...快速修复:审核您互联网连接 在这种情况下,修复比我们想象要简单。过时网络设置、您 Mac 与 Wi-Fi 路由器之间距离,甚至您网络计划都会使您 Mac 软件和应用程序运行缓慢。...幸运是,有几种方法可以解决这些问题。 首先尝试使用这些行之有效方法解决互联网连接问题: 使用以太网电缆代替无线连接。 将路由器移近一些。 重置您 Wi-Fi 路由器关闭不需要标签。...选择您不使用应用。 单击强制退出并确认。 现在,这些应用程序不会偷偷使用您 Mac 强大功能。 9.关闭不需要登录项 当您打开 Mac 时,某些 App 也可能会在登录时启动。

    2.7K30

    超详细论文排版秘籍,宜收藏!

    然后,在【页眉和页脚】选项卡中,找到【导航】组,单击链接到前一节】命令。 最后,选中页码将其删除。 小贴士 如此,当前节页眉/页脚设置才不会对前一节造成影响。 (2)设置正文部分。...将光标移动到下一节,即正文部分,在【页眉和页脚】选项卡中,找到【导航】组,单击链接到前一节】命令,取消对前一节链接。 选择【插入】选项卡中【页码】命令,在下拉列表中选择合适页码样式。...在弹出【定义新多级列表】对话框中单击【更多】按钮,在 【将级别链接到样式】下拉列表中选择多级列表样式(以级别 1—标题1、级别2—标题2为例,一般设置4个级别),如图7所示。...若想删除某个标题内容,则可以选中标题,单击鼠标右键,在弹出快捷 单中选择【删除】命令。 (5)减少显示标题级别。...添加图片、表格、公式题注 题注就是给图片、表格、公式等项目添加自动编号和名称。如果手动给图片、 表格、公式等编号,则有以下两个缺点。 删除时相应编号不会随之删除。

    4.5K10

    项目中更新Stimulsoft组件方法

    他们不会执行任何违反许可协议和使用规则行为。使用哪种方式是您决定。网站和管理器软件包中文件版本相同,请参考最新版本。...第4步: 单击所需产品块中下载。之后,将开始使用浏览器工具下载产品文件档案; 步骤5: 解压缩文件,用存档中文件替换项目Stimulsoft文件。...---- 要从您帐户下载产品文件存档,您应该: 步骤1: 打开设备上任何浏览器; 第2步: 请访问我们网站; 第三步: 输入登录名和密码以输入您帐户; 第4步: 选择所需产品,然后在产品方框中单击...之后,将开始使用浏览器工具下载产品文件档案; 步骤6: 解压缩,将Stimulsoft文件替换为项目存档文件。 此后,Stimulsoft程序集将在您项目中更新。...之后,项目脚本将被更新。 ---- 您可以使用NuGet包(服务器端)和NPM包(客户端)更新Reports.Angular

    2.3K20

    【译】.NET Core 3.0 Preview 3中关于ASP.NET Core更新内容

    下面是预览版更新列表: Razor组件改进: 单项目模板 新Razer扩展 Endpoint路由集成 预呈现 Razor类库中Razor组件 改进事件处理 Forms & validation...本节将会介绍我们在预览更新中对Razor组件所做各种改进。 单项目模板 Razor组件项目模板现在是单个项目,而不是同一解决方案中两个项目。...设置预渲染,Razor组件项目模板不会有静态HTML文件。...在本节中,我们将展示如何创建一个新Angular或React模板,模板允许我们对用户进行身份验证并访问受保护API资源。...创建Angular应用程序 要创建一一个新支持身份验证Angular应用程序,我们需要调用以下命令: 1: dotnet new angular -au Individual 这个命令创建一个新

    22.7K10

    AngularDart4.0 英雄之旅-教程-01介绍

    您将学习以下内容: 使用内置指令来显示和隐藏元素并显示英雄数据列表。 创建组件以显示英雄细节并显示一系列英雄。 对只读数据使用单向数据绑定。 添加可编辑字段以更新具有双向数据绑定模型。...允许用户从主列表中选择一个英雄,并在详细信息视图中编辑英雄。 用管道格式化数据。 创建一个共享服务来组合英雄。 使用路由在不同视图及其组件之间导航。  ...你会学到Angular核心来开始,并获得信心,Angular可以做任何你需要做事情。 您将在介绍性层面介绍很多方面,您会发现许多链接到更深入页面。...你可以单击面板上边两个链接在“Dashboard”和“Heroes”间切换。 当你单击面板上英雄“Magneta”,路由将打开英雄“Magneta”视图,并且你可以修改名字。 ?...点击"Back"将返回到面板,顶部链接带你进入不同主视图,单击“Heroes”,应用将显示“Heroes”主列表视图。 ? 当您单击不同英雄名称时,列表下面的只读迷你细节反映了新选择。

    1.3K20

    IntelliJ IDEA 2022.2.2汉化版免登陆账号「winmac」

    对于每个更改列表,IDE将在新“ 合并冲突”节点下对此类文件进行分组。单击“ 解决操作”链接以打开“ 与冲突合并文件”对话框。...在“修订”操作中使用“ 浏览存储库”(可从VCS日志上下文菜单或文件历史记录中获取),以在“ 项目工具”窗口中打开所需存储库状态。...新调用者过滤器允许您仅在从指定方法调用断点处停止。或者,反之亦然,如果从方法调用它,它将不会停在断点处。...6、组态- 项目配置在IntelliJ IDEA 中,您可以在添加新存储库时排除某些传递依赖项。单击库属性编辑器中新配置操作链接。...您可以通过从过程上下文菜单中选择“ 执行”操作来运行过程,也可以在打开源代码时单击工具栏中“运行”按钮来运行过程。

    4.7K30

    利用1.1.1.1进行DNS网络加速,仅需2分钟让网络更快

    点击链接、打开应用、发送电子邮件时,设备所要做第一件事就是询问目录:我要在哪里找到这些内容? 所以,这个在目录上寻找速度,也一定程度上影响着我们上网速度。...记下任何现有的DNS服务器条目以供将来参考。 单击使用下面的DNS服务器地址。...重新启动您浏览器。 安卓(利用路由器): 连接到您首选无线网络。 在浏览器中输入路由器网关IP地址。 如果出现提示,输入您用户名和密码。这些信息可能会标注在路由器上。...在路由器配置页面,找到DNS服务器设置。 记下现有的DNS服务器条目,以备日后参考。...如果想要更具体了解技术,可以在浏览器地址栏输入1.1.1.1,浏览具体信息。 参考资料:https://1.1.1.1/

    5.5K50

    8分钟为你详解React、Angular、Vue三大框架

    这通常用于清除组件资源依赖关系,这些依赖关系不会随着组件卸载而简单地被移除(例如,移除任何与组件相关setInterval()实例,或者因为组件存在而在 "文档 "上设置 "eventListener...为了解决这个问题,许多客户端路由器用 "hashbang"(#!)来划分动态URL,例如page.com/#!/。然而,在HTML5中,大多数现代浏览器都支持不使用hashbang路由。...此外,当某些浏览器事件发生在按钮或链接上时,使用前端路由器可以有意识地转换浏览器路径。 Vue本身并没有自带前端路由。...它支持将嵌套路由映射到嵌套组件,并提供精细化过渡控制。添加了vue-router,组件只需映射到它们所属路由,父/根路由必须指明子路由渲染位置。 ?...这里要思考一下,目前自己熟悉技术是不是最优选项? 可利用学习时间,如果发现要使用技术需要一些时间学习,这个时间开销到底会不会与开发进度有冲突? 能否保证项目的复杂度最低,这个是比较关键因素。

    22.1K20

    IntelliJ IDEA - 2022.2 正式发布!众多特性解读!

    当您想要更改检查突出显示样式时,可以使用“编辑器中突出显示”下拉菜单进行更改,菜单可以方便地显示所有可用选项。...此新操作可从“插入”和“生成”弹出菜单中获得,您可以通过⌘N快捷方式或右键单击来调用菜单。IDE 将在当前插入符号位置插入目录并用<!...您可以将调试器附加到任何基于 GraalVM 可执行文件,或使用附加调试器启动应用程序。将为 Maven/Gradle 项目自动创建相应运行配置。...通过排水沟图标轻松导航 现在,您只需单击装订线中图标即可轻松导航回页面元素。 来自 URL 页面对象命名 创建新页面对象文件时,向导现在提供了一个可选 URL 字段。...从上下文菜单创建一个新页面对象 每当您在处理现有页面对象类时键入新未引用页面对象类时,您只需导航到警告上下文菜单创建新页面对象即可修复未解析代码警告。

    5.3K40
    领券