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

如何在app.component外部使用带路由器插座的Angular 9导航栏

在Angular 9中,如果想在app.component之外使用带有路由器插座的导航栏,可以按照以下步骤进行操作:

  1. 首先,在app.component.ts文件中定义一个导航栏组件,例如NavbarComponent,并在该组件中使用路由器插座。
代码语言:txt
复制
import { Component } from '@angular/core';

@Component({
  selector: 'app-navbar',
  template: `
    <nav>
      <ul>
        <li routerLink="/home" routerLinkActive="active">Home</li>
        <li routerLink="/about" routerLinkActive="active">About</li>
        <li routerLink="/contact" routerLinkActive="active">Contact</li>
      </ul>
    </nav>
    <router-outlet></router-outlet>
  `,
  styles: [`
    .active {
      font-weight: bold;
    }
  `]
})
export class NavbarComponent {}
  1. 在app.module.ts文件中将NavbarComponent添加到declarations和exports数组中,以便在其他模块中可以使用该组件。
代码语言:txt
复制
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { NavbarComponent } from './navbar.component';

@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot([
      { path: '', redirectTo: '/home', pathMatch: 'full' },
      { path: 'home', component: HomeComponent },
      { path: 'about', component: AboutComponent },
      { path: 'contact', component: ContactComponent }
    ])
  ],
  exports: [
    NavbarComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }
  1. 在其他组件的模板中,可以直接使用<app-navbar></app-navbar>标签来引入导航栏组件,并且该导航栏组件会带有路由器插座,可以实现路由导航功能。
代码语言:txt
复制
<app-navbar></app-navbar>

通过以上步骤,就可以在app.component之外的任何组件中使用带有路由器插座的导航栏了。这样可以实现在整个应用程序中共享导航栏,并且能够根据路由的变化自动高亮当前活动的导航项。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)、腾讯云云数据库MySQL、腾讯云对象存储(COS)等。你可以通过访问腾讯云官网(https://cloud.tencent.com/)了解更多关于这些产品的详细信息和使用指南。

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

相关·内容

Angular2 之 路由与导航基础知识路由模块组件路由路由守卫

导航是很简单,只是不同页面之间切换,路由是实现导航一种。 一个url对应一个页面,在angular2中是一个组件。定义一个规则。...这些路由定义顺序是故意如此设计路由器使用先匹配者优先策略来匹配路由,所以,具体路由应该放在通用路由前面。...组件路由 我们需要将一些特征区域分割开来,做成自己单独模块。必hero模块。在这里,我们需要hero单独导航,这也就是组件路由。...用CanLoad来处理异步导航到某特性模块情况。 使用规则 在分层路由每个级别上,我们都可以设置多个守卫。...来看AdminComponent 下子路由,我们有一个path和children子路由,但它没有使用component。这并不是配置中失误,而是在使用无组件路由。

3.3K10

AngularDart 4.0 高级-路由概述 顶

本指南涵盖路由器主要功能,通过演示可以实时运行小应用程序(查看源代码)演示它们。 概观 浏览器是一种熟悉应用程序导航模型: 在地址中输入一个URL,然后浏览器导航到相应页面。...在任何使用路由器功能Dart文件中,导入路由器库: import 'package:angular_router/angular_router.dart'; 注册提供者和列表指令 如果您已经熟悉Angular...在引导您应用时注册适当路由器提供商。 确保每个路由组件都具有列出组件使用路由器指令元数据。 有关详细信息,请参阅声明路由器提供程序和指令。...路由器插座 当此应用浏览器URL成为/#/heroes时,路由器将该URL与名为HeroesRouteDefinition匹配,并在放置在宿主视图HTML中RouterOutlet后显示HeroesComponent...但是大多数情况下,由于某些用户操作(点击锚标签)迫使您导航

6.1K20
  • Angular12个经典问题,看看你能答对几个?(文末附带Angular测试)

    Angular 2中路由工作原理是什么? 路由是能够让用户在视图/组件之间导航机制。Angular 2简化了路由,并提供了在模块级(延迟加载)下配置和定义灵活性。 ...它是如何在Angular 2中工作Angular 2不具有双向digest cycle,这是与Angular 1不同。...如何在Angular 2应用程序中使用codelyzer? 所有企业应用程序都会遵循一组编码惯例和准则,以更好方式维护代码。...其中一些是: 避免为你组件使用/注入动态HTML内容。 如果使用外部HTML,也就是来自数据库或应用程序之外地方,那么就需要清理它。 不要将外部网址放在应用程序中,除非它是受信任。...Observable提供像map,forEach,reduce之类类似于数组运算符,还有强大运算符,retry()或replay()等,使用起来是相当方便

    17.3K80

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

    为了满足这些要求,您将添加Angular路由器到应用程序。 有关路由器更多信息,请阅读路由和导航页面。  当你完成这个页面,应用程序应该看起来像这个实例(查看源代码)。...换句话说,用户应该能够导航到英雄列表。 更新pubspec 使用Angular路由(angular_router)启用导航。 由于路由器在自己包中,首先将该包添加到应用pubspec: ?...要在另一个包中使用资源,请使用完整包引用,“package:some_other_package / dashboard_component.html”。...本页“路由链接”部分所述,AppComponent模板中顶级导航路由器链接设置为目标路由,/dashboard 和/ heroes固定名称。 这次,您绑定到包含链接参数列表表达式。...你走过路 以下是您在此页面中所取得成果: 您添加了Angular路由器来浏览不同组件。 您了解了如何创建路由器链接来表示导航菜单项。 您使用路由器链接参数导航到用户选择英雄细节。

    17.6K30

    Blazor 中路由和路由模板

    路由器之战:Blazor 与Angular 很长一段时间,路由逻辑实现都隐藏在 Web 服务器或服务器端框架( ASP.NET)折叠中。...路由器实现是通过 SPA 框架(其中 Angular 最为出色)移动到客户端。让我们花点时间对合并 Angular 路由器和仍在使用 Blazor 路由器功能进行简要比较。...与 Angular 路由器不同,它在获取路由参数后无法异步运行解析步骤。最后,Blazor 路由器不支持条件重定向到备用路由 - 这也是 Angular 路由器可以做到。...对于具有约束路由,任何无法成功转换为指定类型参数值都会使匹配失效,并且无法识别该路由。 更智能链接和编程 URL 导航 在 Blazor 应用程序中,欢迎你使用定位标记来创建指向外部内容链接。...但是,当定位标记用于呈现菜单或导航时,可能需要一些额外工作来调整 CSS 样式以反映链接状态。 内置 Blazor NavLink 组件可以用于任何需要定位点元素地方,尤其是在菜单中。

    8.4K21

    Angular 快速学习笔记(1) -- 官方示例要点

    Angular 最佳实践之一就是在一个独立顶级模块中加载和配置路由器,它专注于路由功能,然后由根模块 AppModule 导入它 b. ng generate module app-routing...添加路由 ,路由定义 会告诉路由器,当用户点击某个链接或者在浏览器地址中输入某个 URL 时,要显示哪个视图,因此路由包含两个属性: i. path:一个用于匹配浏览器地址中 URL 字符串...ii. component:当导航到此路由时,路由器应该创建哪个组件 const routes: Routes = [ { path: 'heroes', component: HeroesComponent...要使用路由,必须首先初始化路由器,并让它开始监听浏览器中地址变化 b....*ngFor 不能直接使用 Observable。 不过,它后面还有一个管道字符(|),后面紧跟着一个 async,它表示 Angular AsyncPipe。

    3.6K00

    Angular 快速学习笔记(1) -- 官方示例要点

    Angular 最佳实践之一就是在一个独立顶级模块中加载和配置路由器,它专注于路由功能,然后由根模块 AppModule 导入它 b. ng generate module app-routing...添加路由 ,路由定义 会告诉路由器,当用户点击某个链接或者在浏览器地址中输入某个 URL 时,要显示哪个视图,因此路由包含两个属性: i. path:一个用于匹配浏览器地址中 URL 字符串...ii. component:当导航到此路由时,路由器应该创建哪个组件 const routes: Routes = [ { path: 'heroes', component: HeroesComponent...要使用路由,必须首先初始化路由器,并让它开始监听浏览器中地址变化 b....*ngFor 不能直接使用 Observable。 不过,它后面还有一个管道字符(|),后面紧跟着一个 async,它表示 Angular AsyncPipe。

    3.7K50

    Angular快速学习笔记(2) -- 架构

    NgModule 为一个组件集声明了编译上下文环境,它专注于某个应用领域、某个工作流或一组紧密相关能力。 NgModule 可以将其组件和一组相关代码(服务)关联起来,形成功能单元。...比如,要在你应用中使用路由器(Router)服务,就要导入 Router 这个 NgModule。 1.1.1 定义一个模块 一个NgModule就是一个使用@NgModule 装饰器类。...与组件直接关联模板会定义该组件宿主视图。该组件还可以定义一个层次结构视图,它包含一些内嵌视图作为其它组件宿主。 ?...1.4 路由(Routing) Angular Router 模块提供了一个服务,它可以让你定义在应用各个不同状态和视图层次结构之间导航时要使用路径。...它工作模型基于人们熟知浏览器导航约定: 在地址输入 URL,浏览器就会导航到相应页面 在页面中点击链接,浏览器就会导航到一个新页面 点击浏览器前进和后退按钮,浏览器就会在你浏览历史中向前或向后导航

    5.3K20

    使用Ionic2开发Todo应用0 开始之前1 创建新Ionic 2工程2. 设置主页(Home page)3 持久化数据保存4 总结

    同组件类似,您还可能创建诸如服务services(稍后我们将创建数据服务),但没有模板和样式,但在结构上类似一个正常组件。...root page 根页面是您应用程序显示第一个页面,然后你可以从这里导航到其他页面。改变Ionic 2应用程序中视图可以通过改变这一根页面,或** push ** 推或 pop弹出视图。...关于导航更详细解释,我推荐看看一个相关Ionic 2导航指南。 2. 设置主页(Home page) 现在我们已经建立了基本应用程序,让故事开始吧。首先,让我们建立todo列表模板。...不同属性行为可能会有所不同,取决于在什么平台上运行,以iOS为例,将end会将按钮放到导航右边。...4 总结 在本教程中我们已经介绍了如何实现很多Ionic 2应用常用功能: 创建视图 监听和处理事件 视图之间导航 在视图之间传递数据 建立双向数据绑定 保存数据 显然还有很多我们可以做,使这个应用程序更漂亮

    6.1K50

    Angular性能优化实践——巧用第三方组件和懒加载技术

    为了帮助开发者深入理解和使用Angular,本文将以我司客户中最为典型业务场景——在线表格编辑为例,演示如何借助懒加载技术,在基于 Angular框架中实现在线导入导出Excel以及数据在线填报功能...在懒加载模块路由模块中,添加一个指向该组件路由。本次demo存在两个懒加载模块。 ? ? 2. 建立导航UI 虽然可以直接在地址直接输入URL,但是有导航UI会更好用。...这会让Angular知道AppRoutingModule是一个路由模块,而 forRoot() 表示这是根路由模块。它会配置传入所有路由、让你能访问路由器指令并注册 Router。...这种方式下 Angular 就会知道这个路由列表只负责提供额外路由并且其设计意图是作为特性模块使用。你可以在多个模块中使用 forChild()。...除了懒加载,Angular还提供了很多性能优化方式,浏览器缓存策略、RxJS、Tree Shaking、使用AoT编译等,用好这些技术能让你项目性能有所提升,为用户提供更良好使用体验。

    4.1K20

    Angular系列教程-第五节

    1.模块 NgModule 是一个带有 @NgModule 装饰器类。 @NgModule 参数是一个元数据对象,用于描述如何编译组件模板,以及如何在运行时创建注入器。...它会标出该模块自己组件、指令和管道,通过 exports 属性公开其中一部分,以便外部组件使用它们。 NgModule 还能把一些服务提供商添加到应用依赖注入器中。...导入其它带有组件、指令和管道模块,这些模块中元件都是本模块所需。 提供一些供应用中其它组件使用服务。 每个 Angular 应用都至少有一个模块,也就是根模块。...如果你使用了未声明过组件,Angular 就会报错。 declarations 数组只能接受可声明对象。可声明对象包括组件、指令和管道。...3.路由 在用户使用应用程序时,Angular 路由器能让用户从一个视图导航到另一个视图。

    2.9K20

    Vue中实现路由跳转传参

    在main.js中使用VueRouter构造函数生成路由对象什么是路由(器)对象: 专门负责监控地址变化,并根据地址变化查找对应组件,替换页面中router-view 核心对象// 使用new调用...$mount('#app') // 若没有配置el属性,就需要使用$mount()函数手动挂载,等同于el:"#app""#app" 番外:当然,我们也可以在一个单独index.js文件里面创建路由字典以及路由器对象并将路由字典传入路由器对象中中...番外:参数动态路由匹配动态路径参数,使用冒号 : 标记。比如,当一个路由被匹配时,它 params 值将在每个组件中以 this....◼️ 小结:route,  routes,  routerrouter: 用new VueRouter()创建出路由器对象 a. 监视地址变化 ;b. 还可以执行跳转动作!...routes会被装入new VueRouter()即路由器对象router中,和router对象一起发挥作用! route: 一个路由地址,代表当前地址url信息,像BOM中location。

    15210

    何在 Windows 上安装 AngularAngular CLI、Node.js 和构建工具指南

    Angular CLI, Node.js, and Build Tools,作者为Ahmed Bouchefra 在本教程中,我们将学习如何在 Windows 中安装 Angular CLI 并使用它来创建...什么是 Angular CLI? Angular CLI 是用于初始化和使用 Angular 项目的官方工具。它使您免于复杂配置和构建工具( TypeScript、Webpack 等)麻烦。...: add: 向您项目添加对外部支持。...首先导航到项目的文件夹中并运行以下命令: $ cd frontend $ ng serve 您现在可以导航到 http://localhost:4200/ 地址来开始使用前端应用程序。...结论 在本教程中,我们了解了如何在 Windows 计算机上安装 Angular CLI,并使用它从头开始初始化一个新 Angular 项目。

    46900

    Angular2 :从 beta 到 release4.0 版本升级总结

    它标记出该模块拥有的组件、指令和管道, 并把它们一部分公开出去,以便外部组件使用它们。 它可以向应用依赖注入器中添加服务提供商。 具体请参考官方文档。...表示导航事件变更完毕,等 反正改了挺多,请自行查询官方API文档…[捂脸] 新增路由模块 路由使用NgModule创建,示例如下: import {NgModule} from '@angular/core...升级angular(v2.4.0)到(v4.1.1)版本后,左侧导航状态定位失效 原因:升级后,router和componenthook顺序调整(仅根据个人观察,未经验证),导致组件状态未能在路由事件结束...无法从router里获取RouteParamsAPI。 原因:angular(v4.1.1)中,使用ActivatedRouteAPI获取路由信息。...使用angular-cli后无法自定义webpackalias, 导致文件引入路径很长,../../../shared/。

    8.2K00

    React进阶篇(九)React Router

    路由器 React Router通过 Router和Route两个组件完成路由功能。 Router:路由器。一个应用只需要一个Router。 Route:路由配置。其为Router子组件。...路由方式有两种(都是Router子组件) BrowserRouter:使用Html5 History API(pushState, replaceState等)实现I和URL同步 http://example.com.../some/path 使用BrowserRouter,需要对服务器进行配置,让服务器能处理所有可能正确URL(需要服务器返回SPA应用中唯一HTML页面) HashRouter:使用URLHash...现在有两个页面: 登录页Login,不带有导航 主页Home,导航 页面Child,导航 用户先通过登录页面登录,然后自动跳转到主页。 1....定义BasicLayout上使用菜单menu.js。

    3K20

    SNS项目笔记--项目启动

    摘要:全新SNS项目启动,现ionic更新到了3.0版本,angular更新到了4.0版本,博主随着这项目,带着大家领略一番ionic相关技术细节上问题 1、全新项目下载操作: 在新版本下,ionic...得到健硕性更新,angular却减少了自己体积,正所谓:“ionic吃好了,angular减肥了”于是我们也可以抛弃以前一些坑,直接进入流畅性操作了。...效果图.png 这里ionic 很人性化给了几个选项进行筛选其各类项目分别是:1、tabs-->底部导航项目;2、blank-->空项目;3、sidemenu-->默认主页面有侧滑项目;4、super...2、新增一个导航界面 在项目进行中要进行对底部导航栏目的修改,在项目中默认为三个导航,可是项目需求需要四个,我们需要ionic g page newPage//这里newPage为我们开发人员自定义名称自动生成页面...修改后结果.png 3、更改底部导航颜色 由于项目使用橙色为主题色,最开始我不知道在哪里修改底部导航颜色,于是去官网上寻找答案:http://ionicframework.com/docs/api

    2.9K20

    『React Navigation 3x系列教程』createDrawerNavigator开发指南

    DrawerNavigatorConfig(可选):配置导航路由(:默认首屏,navigationOptions,paths等)样式(,转场模式mode、头部模式等)。...path(可选):用来设置支持schema跳转时使用,具体使用会在下文有关Schema章节中讲到; navigationOptions(可选):用以配置全局屏幕导航选项:title、headerRight...自定义侧边(contentComponent) DrawerNavigator有个默认滚动侧边,你也可以通过重写这个侧边组件来自定义侧边: contentComponent:(props)...这也可以通过在顶级路由器使用screenProps.drawerLockMode 动态更新。...();; 其他API 【案例1】使用DrawerNavigator做界面导航、配置navigationOptions、自定义侧边 ?

    7.1K10

    综合布线运维专业术语解析

    CR:核心路由器又称“骨干路由器”,是位于网络中心路由器。位于网络边缘路由器叫接入路由器。...模块插座:用于双绞线标准插口连接器。"电话插座"。 模块插头:用于双绞线标准插头连接器。"电话插头"。 MT-RJ:一种小型化双光纤连接器。 多模:一种光纤类型,光以多重路径通过这种光纤。...Riser:连接各楼层电信间垂直状态主干线缆路由竖井 RJ11:一种用于6位模块插座配线模式。参照插座本身使用。 RJ21:一种用于25线对(AMPCHAMP)连接器配线模式。...参照连接器本身使用。 RJ45:一种用于8位模块插座配线模式。参照插座本身使用。 SC连接器:一种双向光纤连接器。符合568电缆标准标准连接器。 单模:一种光纤类型,光以单一路径通过这种光纤。...信息:客观事物运动状态表征与描述。它是客观事物运动状态符号、序列(字母、数字)或连接时间函数(如图像)。 管理点:管理通道各种交叉连接、直接连接或信息插座排列。

    1.7K50
    领券