angular2里设置一级二级路由（导航栏切换）

最新推荐文章于 2020-12-03 21:01:36 发布
最新推荐文章于 2020-12-03 21:01:36 发布
阅读量1.2k 收藏 2
点赞数
分类专栏： angular 文章标签： angular
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45158253/article/details/104770289
版权

一级导航

详细步骤

1、创建angular项目

ng new angualrdemo08 --skip-install
在这里插入图片描述
进入项目cd angular08，并下载各种包 。使用npm i或cnpm i命令

2、创建需要的组件

ng g component home
ng g component new
ng g component header
ng g component home/asideone
ng g component home/asidetwo
ng g componenthome/asidethree等等

3、找到 app-routing.module.ts 配置路由

用命令创建的组件，会自动引入app.module.ts文件里，把这些路径复制粘贴到app-routing.module.ts文件里，如下示例，把这部分粘贴放到app-routing.module.ts文件里：

import { HomeComponent } from './home/home.co
最低0.47元/天 解锁文章
蒲公英
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Angular2之二级路由
Irmhy
11-25 1万+
2016年11月25日。 写了一阵子的Angular 2 现在还是觉得更喜欢Angular 1的版本。 1的版本更多的是整合，按照模块来区分，并没有做更细的划分，而2的版本中，在创建时模块组件时就已经有了很好的区分，每个模块单独管理各自的组件，在组件中也是各自管理自己的样式，效果。 在以往1的版本中，要整合路由是十分容易的，无论是一级或者二级路由都可以写在一个文件中 但是在2中则是
Angular2之二级路由详解
12-10
写了一阵子的Angular 2 现在还是觉得更喜欢Angular 1的版本。 1的版本更多的是整合，按照模块来区分，并没有做更细的划分，而2的版本中，在创建时模块组件时就已经有了很好的区分，每个模块单独管理各自的组件，在组件中也是各自管理自己的样式，效果。 在以往1的版本中，要整合路由是十分容易的，无论是一级或者二级路由都可以写在一个文件中 但是在2中则是将路由写在上层模块中，一般app为主模块，定义一个app-routing.module.ts的主路由。 基本的Angular 2 入门在前面一篇里面也有所提及 这里就从创建项目开始： 第一步：创建一个基于angular-cli的项目 ng
前端学习（2330）：angular之二级路由
歌谣的博客
10-01 398
angular2项目，二级路由+webapi
07-13
我自己做的一个angualr2项目，有二级路由、登录、导航、增删改查，样式用的bootstrap4。访问数据库使用的是webapi方法，所以整个项目没有后台代码。
angularjs实现省市二级菜单（可以选择默认值）
zyb1994的博客
09-29 1379
使用数组格式的json数据折腾了一天，实现了级联菜单，但悲催的发现并不能去选择默认值。所以在网上又找了一种使用对象作为json数据，然后ngoptions的参数稍微复杂一点。 先贴angularjs代码<div class="form-group"> <label class="col-sm-2 control-label">所在省份</la
angular2路由切换改变页面title的示例代码
08-29
Angular2 中的路由切换改变页面标题是通过使用路由设置中的 data 参数来实现的。在路由设置中，可以传递数据，如 `{path: 'home', component: HomeComponent, data: {title: 'Home', aaa: 'aaaa', bbb: 'bbbb', ccc...
Angular4自制一个市县二级联动组件示例
08-28
在本文中，我们将探讨如何在Angular4中创建一个市县二级联动组件。这个组件的主要功能是根据用户在第一个下拉框中选择的市属或省属，动态地更新后续的市和县（区）的下拉框选项。让我们一步步地解析实现这个功能的...
Angular 动态添加 Tab 标签（通过路由实现）
02-24
通过使用路由来实现 Angular 动态添加 Tab 标签的效果。
零开始构建Angular项目----之路由配置 和 nav导航条
weixin_30300225的博客
07-23 230
效果 接着上次 零开始构建Angular项目 继续扯路由配置 和nav导航条 1、增加about页面 about.component.html <!-- Docs nav ================================================== --> <div class="row"...
angular-tab:通过路由复用策略，结合路由懒加载模块的方式，使用ng-zorro的tabs实现动态tab
05-15
angular-tab 通过路由复用策略，结合路由懒加载模块的方式，使用ng-zorro的tabs实现动态tab angular-cli 版本 1.7.4 nodejs 版本 8.11.2 安装依赖 npm install 启动项目 ng serve 参考文章 简书
angularJS二级联动选择菜单
10-21
纯angularJS写的二级联动选择菜单，亲测可用 有问题可以联系我
Angular与ionic的幸福生活之“tabs路由“的项目结构及跳转方式
qq_44963669的博客
12-03 298
Angular与ionic的幸福生活之“tabs路由“的项目结构及跳转方式 如何快速的上手使用 icon tabs 呢，首先要熟悉性项目结构知道怎么去配置这个路由，每部分是干啥的，这样才能快速上手节约学习时间 1. 快速生成项目 ionic start mfreshApp 自定义文件名称 2.熟悉项目结构 什么是根路由？就是管理注册路由的一个目录，只要是出创建的子路由，都要在根路由中注册，用命令行 ionic g page 项目名称，自动生成，但仍需要去配置这个路由，需要手动去配置，值得庆幸的是项目包中
angular--路由导航三种方法
weixin_30359021的博客
08-27 92
转载于:https://www.cnblogs.com/sugartang/p/11421405.html
angular7 ----路由 --【页面跳转 / 默认路由 / 默认选中路由 】
shang_0302的博客
10-10 3284
写一点儿angular7 的路由基础的东西 一个带路有导航栏的一个例子 一：用angular创建一个默认带路由的项目；（上一篇里面有详细介绍） 二：创建需要的组件 ；(这里就用3个组件来举例子，自己可以根据实际需求添加) 创建home 组件 ng g c home 创建goods组件 ng g c goods 创建message组件 ng g c message 三...
将Angular应用部署到nginx子目录
robinz1001的博客
11-29 1635
将Angular应用部署到nginx子目录 1. 调整Angular的base目录 在执行 ng build 命令以后，生成的index.html文件的 head 标签中有一个 base 标签。 如果要将angular部署到非根目录，这里需要放入目录名。比如需要部署到 /review 路径下，可按以下代码： <!doctype html> <html lang="en"> ...
angular-路由与导航部分梳理
weixin_34408717的博客
07-03 124
为什么80%的码农都做不了架构师？>>> ...
Angular二级导航栏
weixin_42603009的博客
05-17 573
1,将菜单放入数据库： 模拟放到该路径下： src/assets/json/header.json { "siteName": "PGG娱乐健身中心", "menu":[ { "id":"1", "menuName":"首页", "menuChildren": [{}], "showSubMenu": false }, { "id":"2", "menuName
angular6学习(二)：angular项目目录文件说明
七刀的专栏
06-19 2900
angular导航栏作为抽象路由
最新发布
07-16
在 Angular 中，导航栏可以作为一个抽象路由来实现。抽象路由是指在路由配置中定义的一种特殊路由，它不会对应一个具体的组件或页面，而是用于组织和管理其他路由。 以下是如何将导航栏作为抽象路由的步骤： 1. 创建导航栏组件：首先，创建一个导航栏组件，用于显示导航菜单和处理导航逻辑。这个组件不需要对应一个具体的路由路径，因为它将作为抽象路由使用。 2. 定义抽象路由：在路由配置文件中，定义一个抽象路由，例如`{ path: '', component: NavbarComponent, outlet: 'navbar' }`。这里使用一个特殊的`outlet`属性来指定抽象路由的出口名称为`navbar`，以便在其他路由中插入导航栏。 3. 插入导航栏：在其他具体路由的模板中，使用`<router-outlet>`元素来指定插入抽象路由的位置。例如，可以在主模板中添加`<router-outlet name="navbar"></router-outlet>`，这样导航栏就会被插入到主模板的指定位置。 通过以上步骤，导航栏就作为一个抽象路由被集成到应用中了。它可以在不同的页面中显示，并且可以处理导航逻辑。 使用抽象路由的好处是，可以将导航栏与其他具体路由组件解耦，使其独立于具体的页面。这样可以更容易地扩展和维护导航栏功能，同时保持代码的整洁和可读性。 希望以上解答对你有帮助，如果还有其他问题，请随时提问！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值