如何从着陆页跳转到TabsPage？报错invalid link: TabsPage

嗨，我来帮你搞定这个跳转报错的问题！你遇到的invalid link: TabsPage错误，大概率是因为TabsPage没有正确注册或者引用方式不对，咱们一步步来解决：

第一步：确保TabsPage在AppModule中正确注册 #

打开你的app.module.ts文件，要保证TabsPage已经被导入，并且添加到declarations和entryComponents数组里（Ionic 3及更早版本必须加entryComponents，因为导航跳转的组件需要提前编译）：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicModule, IonicApp } from 'ionic-angular';
import { MyApp } from './app.component';
import { TabsPage } from '../pages/tabs/tabs'; // 注意这里的路径要和你的TabsPage实际位置匹配
import { LandingPage } from '../pages/landing/landing';

@NgModule({
  declarations: [
    MyApp,
    TabsPage,
    LandingPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    TabsPage, // 这一步很关键，必须把TabsPage加到这里
    LandingPage
  ],
  providers: []
})
export class AppModule {}

第二步：修改landing.ts的跳转代码（更稳妥的写法） #

不要用字符串'TabsPage'来引用组件，而是直接导入TabsPage类，然后传入setRoot方法，这样能避免字符串拼写或者注册的问题：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { TabsPage } from '../tabs/tabs'; // 同样要保证路径正确

@Component({
  selector: 'page-landing',
  templateUrl: 'landing.html'
})
export class LandingPage {

  constructor(public navCtrl: NavController) {}

  startApp() {
    // window.localStorage.setItem('username', 'admin');
    this.navCtrl.setRoot(TabsPage, {}, { animate: true, direction: 'forward' });
  }
}

额外提示：如果坚持用字符串引用 #

要是你还是想用'TabsPage'这种字符串方式，那得确保两个点：

• TabsPage的类名确实是TabsPage，没有拼写错误
• app.module.ts里的entryComponents已经包含了TabsPage

不过还是推荐直接传类的方式，不仅不容易出错，IDE还能给你代码提示，维护起来更方便。

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