在Angular 9中,如果想在app.component之外使用带有路由器插座的导航栏,可以按照以下步骤进行操作:
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 {}
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 { }
<app-navbar></app-navbar>
通过以上步骤,就可以在app.component之外的任何组件中使用带有路由器插座的导航栏了。这样可以实现在整个应用程序中共享导航栏,并且能够根据路由的变化自动高亮当前活动的导航项。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)、腾讯云云数据库MySQL、腾讯云对象存储(COS)等。你可以通过访问腾讯云官网(https://cloud.tencent.com/)了解更多关于这些产品的详细信息和使用指南。
领取专属 10元无门槛券
手把手带您无忧上云