Question

我正在将参数从一个组件传输到app.component.ts，但是错误即将来临。错误：没有NavParams提供程序。

这是我的 app.component.ts ：

    public IEnumerator<BVHNode<BoundingVolumeClass>> GetEnumerator()
    {
        return rootNode == null
          ? Enumerable.Empty<BVHNode<BoundingVolumeClass>>().GetEnumerator()
          : rootNode.GetEnumerator();
    }

在此组件中，我正在获取这样的navparam值this.uname = this.navParams.get（'param1'）;

这是我的 loginpage.ts ：

import { FrontPage } from './../pages/front/front';
import { Component, ViewChild } from '@angular/core';
import { Nav, Platform, NavController, NavParams} from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';
import { ProductPage } from '../pages/product/product';
import { LoginpagePage } from '../pages/loginpage/loginpage';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;
  menuclick: boolean = true;
  menuclick2: boolean = false;
  rootPage: any = FrontPage;
  uname: string;

  pages: Array<{title: string, component: any, name2: string}>;

  constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen, public navParams: NavParams) {
    this.initializeApp();
    this.uname = this.navParams.get('param1');
    this.pages = [
      { title: 'Home', component: FrontPage, name2: 'home' },
      { title: 'Product Categories', component: ProductPage, name2: 'basket' },
      { title: 'Merchandise', component: ProductPage, name2: 'man' },
      { title: 'My Orders', component: ProductPage, name2: 'cart' },
    ];

  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }

  openPage(page) {
    this.nav.setRoot(page.component);
  }

  loginpage2()
  {
    this.nav.push(LoginpagePage);
  }

  logoutClicked() {
    console.log("Logout");
    this.nav.pop();
  }
}

错误：没有NavParams提供程序。非常感谢您的帮助。

Answer 1

我遇到了同样的问题，我必须做两件事来解决它：

从app-routing-module.ts删除模态路由条目
像这样更新Modal模块中的以下条目：

@NgModule({
     imports: [
       CommonModule,
       FormsModule,
       IonicModule
       ],
     declarations: [DetailsPage],
  entryComponents:[DetailsPage]
})

export class DetailsPageModule {}

通过这两个更改，我可以在de Modal ts文件中使用如下的navParams：

ionViewWillEnter() {
   this.selectedItem = this.navParams.get('selectedItem');
   console.log(this.selectedItem);
 }

Answer 2

只需使用ActivatedRoute的{{1}}接口检索查询参数：

'@angular/router'

Answer 3

您是否已将离子型角度模块导入@NgModule中？

 imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp, {

    })
  ],

Answer 4

能否请您尝试添加。希望它可能会起作用。如果您提供给我一个项目，我会以更好的方式为您提供帮助。

@Component({
 selector: 'page-loginpage',
 templateUrl: 'loginpage.html',
 providers: [NavParams]
})

Answer 5

我使用此变体

const params = {
  phone,
  verificationId,
};
this.navCtrl.navigateForward("/forward-page", { state: params });

和前一页

constructor(private router: Router) {
    const state = this.router.getCurrentNavigation().extras.state
    if (state) {
        this.phone = state.phone;
        this.verificationId = state.verificationId;
    }
}

效果很好

Answer 6

我得出的结论是，app.component.ts是您的应用程序中首先呈现的东西。您无法导航到它，显然，您无法接收到参数。

第一个解决方案是：我必须使用提供程序来存储您的用户数据，然后从提供程序设置您的侧菜单数据。

第二个解决方案是：要使用以下事件。

通过使用事件，我已经解决了我的问题，并且事件代码运行正常。

import { Events } from 'ionic-angular';

// first page (publish an event when a user is created)
constructor(public events: Events) {}
createUser(user) {
  console.log('User created!')
  this.events.publish('user:created', user, Date.now());
}


// second page (listen for the user created event after function is called)
constructor(public events: Events) {
  events.subscribe('user:created', (user, time) => {
    // user and time are the same arguments passed in `events.publish(user, time)`
    console.log('Welcome', user, 'at', time);
  });
}

Answer 7

我找到了解决方案而不是在navParams

中添加constructor

添加public navParams = new NavParams

例如

export class LoginpagePage {
  public navParams = new NavParams
  todo : FormGroup;
  responseData : any;
  userData = {"username": "", "password": ""};
  constructor(public navCtrl: NavController

Ionic App中没有提供NavParams错误的提供程序

7 个答案: