在Angular Material 15中使用mat-tab-nav-bar与router-outlet的解决方法如下所示： 首先，确保已安装了Angular Material 15和相关依赖：

npm install @angular/material@15.0.0
npm install @angular/cdk@15.0.0

在app.module.ts中导入所需的模块：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatTabsModule } from '@angular/material/tabs';
import { MatIconModule } from '@angular/material/icon';
import { RouterModule } from '@angular/router';

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

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatTabsModule,
    MatIconModule,
    RouterModule.forRoot([
      { path: '', component: HomeComponent },
      { path: 'about', component: AboutComponent }
    ])
  ],
  declarations: [
    AppComponent,
    HomeComponent,
    AboutComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

在app.component.html中使用mat-tab-nav-bar与router-outlet：

  
    Home
  
  
    About
  

在home.component.ts和about.component.ts中创建相应的组件：

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

@Component({
  selector: 'app-home',
  template: '
Home Component
'
})
export class HomeComponent { }

@Component({
  selector: 'app-about',
  template: '
About Component
'
})
export class AboutComponent { }

这样就可以在Angular Material 15中使用mat-tab-nav-bar与router-outlet了。当点击tab时，会在router-outlet中显示相应的组件内容。