咨询：Onsen UI + Angular 5+ 如何适配默认@angular/router？

我之前帮好几个开发者解决过Angular 5+里Onsen UI和默认Router协同的问题，你的报错我也见过——本质是Onsen自带的导航逻辑和Angular Router的机制冲突了，咱们一步步来搞定它：

核心问题拆解 #

你遇到的Uncaught TypeError: this._content._show is not a function，是因为<ons-navigator>组件默认依赖[page]属性来管理页面栈，当你移除这个属性后，它内部找不到预期的页面实例，就会抛出这个错误。所以咱们的思路是放弃用Onsen的[page]导航，完全改用Angular Router的路由系统，让Onsen只负责UI组件的渲染。

具体实现步骤 #

1. 配置AppModule的路由和模块导入 #

首先确保你的AppModule里同时导入了Angular Router和Onsen UI的模块，并且正确定义路由规则：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';
import { OnsenModule } from 'ngx-onsenui';
import { AppComponent } from './app.component';
// 导入你的页面组件
import { HomePageComponent } from './home-page/home-page.component';
import { SettingsPageComponent } from './settings-page/settings-page.component';

const appRoutes: Routes = [
  { path: '', component: HomePageComponent },
  { path: 'settings', component: SettingsPageComponent },
  // 404路由
  { path: '**', redirectTo: '' }
];

@NgModule({
  imports: [
    BrowserModule,
    OnsenModule,
    RouterModule.forRoot(appRoutes)
  ],
  declarations: [
    AppComponent,
    HomePageComponent,
    SettingsPageComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 改造根组件模板，替换Onsen导航为Router Outlet #

把原来依赖<ons-navigator>和[page]的结构，改成用router-outlet承载页面，同时保留Onsen的UI容器（比如<ons-splitter>或者直接用<ons-page>包裹）：

<!-- app.component.html -->
<ons-page>
  <ons-toolbar>
    <div class="center">我的App</div>
    <div class="right">
      <ons-button (click)="goToSettings()">设置</ons-button>
    </div>
  </ons-toolbar>
  
  <!-- 用Angular Router的出口来渲染页面 -->
  <router-outlet></router-outlet>
</ons-page>

然后在根组件的TS里添加导航方法，用Angular Router的navigate代替Onsen的pushPage：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private router: Router) {}

  goToSettings() {
    this.router.navigate(['/settings']);
  }
}

3. 子页面组件的规范 #

每个子页面必须用<ons-page>包裹内容，这样才能和Onsen的样式、生命周期兼容：

<!-- home-page.component.html -->
<ons-page>
  <div class="content">
    <h1>首页内容</h1>
    <ons-button (click)="goToSettings()">跳转到设置页</ons-button>
  </div>
</ons-page>

子页面的TS里同样用Angular Router导航：

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

@Component({
  templateUrl: './home-page.component.html'
})
export class HomePageComponent {
  constructor(private router: Router) {}

  goToSettings() {
    this.router.navigate(['/settings']);
  }
}

额外优化：保留页面切换动画 #

如果想要Onsen那种原生风格的页面切换动画，可以结合Angular Router的动画功能实现。比如在路由配置里添加动画，或者给路由切换的元素添加Onsen的动画类（比如page-transition）。

这样配置后，你就能完全用Angular Router来管理路由，同时正常使用Onsen UI的所有组件啦！

内容的提问来源于stack exchange，提问作者Kevin192291