下面是一个示例代码，演示了如何在Angular应用中使用子路由和导航栏。

首先，在你的应用中创建一个模块，例如AppModule：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './app.component';
import { HomeComponent } from './home.component';
import { AboutComponent } from './about.component';
import { ContactComponent } from './contact.component';

// 定义子路由
const appRoutes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'contact', component: ContactComponent }
];

@NgModule({
  imports: [
    BrowserModule,
    RouterModule.forRoot(appRoutes) // 将子路由添加到根路由中
  ],
  declarations: [
    AppComponent,
    HomeComponent,
    AboutComponent,
    ContactComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

然后，在你的应用组件中创建一个导航栏组件，例如AppComponent：

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

@Component({
  selector: 'app-root',
  template: `
    
    
  `
})
export class AppComponent { }

接下来，创建每个子路由对应的组件，例如HomeComponent、AboutComponent和ContactComponent：

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

@Component({
  template: '
Welcome to Home!
'
})
export class HomeComponent { }

@Component({
  template: '
About Us
'
})
export class AboutComponent { }

@Component({
  template: '
Contact Us
'
})
export class ContactComponent { }

最后，将AppComponent添加到应用的根组件中：

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

@Component({
  selector: 'app-root',
  template: `
     
  `
})
export class AppComponent { }

现在，你的应用就可以通过子路由和导航栏进行导航了。例如，当访问http://localhost:4200/home时，将显示HomeComponent的内容，同时导航栏中的"Home"链接将被激活。

希望这个示例能帮到你！