Question

我想从URL获取查询参数。所以我使用RouterModule来读取查询参数。但是我收到了错误

无法读取属性＆＃39; forRoot＆＃39;未定义的。

我经历了类似的问题，但就我而言，我没有路线。使用的所有其他问题RouterModule.forRoot(routes)。我做错了什么？

Angular 2.4.10

路线3.4.10

这是我的代码。的 module.js

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { UpgradeModule, downgradeComponent, downgradeInjectable } from '@angular/upgrade/static';
import { LayoutModule } from '@angular/cdk/layout';
import { HttpModule, Http, XHRBackend, RequestOptions } from '@angular/http';
import { RouterModule, Router } from '@angular/router';

import { FlexLayoutModule } from '@angular/flex-layout';
import { Ng2DeviceDetectorModule } from '/thinkshop/angular2plugins/ng2-device-detector/index.ts';

import { ActivateAccountService } from '/thinkshop/widgets2/thinkshopapplication/activateaccount/ActivateAccountService.ts';
import { SupportedDeviceService } '/thinkshop/widgets2/thinkshopapplication/service/supporteddeviceservice/supporteddeviceservice.ts'
import { FormContainerComponent } '/thinkshop/widgets2/thinkshopapplication/component/formcontainer.component.ts'
import { ActivateAccountComponent } from '/thinkshop/widgets2/thinkshopapplication/activateaccount/activateaccount.ts';


const CLIENT_ID = { clientId: "" };
const APP_NAME = 'web-ideolve';
const AUTH_TOKEN = "";
const CAN_EDIT = false;

@NgModule({
  imports: [
    BrowserModule,
    UpgradeModule,
    RouterModule.forRoot(),
    FlexLayoutModule,
    Ng2DeviceDetectorModule.forRoot(),
    HttpModule,
    LayoutModule
  ],

  declarations: [
    FormContainerComponent,
    ActivateAccountComponent
  ],
  entryComponents: [
    FormContainerComponent,
    ActivateAccountComponent
  ],
  providers: [
    Router,
    SupportedDeviceService,
    ActivateAccountService,


    { provide: 'CLIENT_ID', useValue: CLIENT_ID },
    { provide: 'APP_NAME', useValue: APP_NAME },
    { provide: 'AUTH_TOKEN', useValue: AUTH_TOKEN },
    { provide: 'CAN_EDIT', useValue: CAN_EDIT },

  ],
  bootstrap: [FormContainerComponent]
})

export class AppModule {

  showideolvelink = false;

  constructor(private upgrade: UpgradeModule) {
    this.showideolvelink = true;
  }
}

service.ts

import { Injectable, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Injectable()
export class ActivateAccountService implements OnInit{

    emailId: string= null;

    constructor(private activatedRoute: ActivatedRoute) {
    }

    ngOnInit() : void{
        this.init();
    }

    init(){
        let encodedParams: any = this.activatedRoute.snapshot.params.p;

        if(encodedParams != null ){
            var params= JSON.parse(atob(encodedParams));

            this.emailId=  params.email;
        }
    }

    getEmailId() : string{
        return this.emailId;
    }       
}

Answer 1

您需要定义routes，如下所示，然后将其添加到RouterModule.forRoot(routes)。

import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';

//Routes
const routes : Routes = [
{
  path: '',
  component: AppComponent
}
]


@NgModule({
  declarations: [
  // Components
  ],
  imports: [
    BrowserModule,
  RouterModule.forRoot(routes) // You need to add this 
  ],
  providers: [UserService],
  bootstrap: [AppComponent]
})

export class AppModule { }

现在，如果你想获得路线参数，你可以使用：在 AppComponent

import { RouterModule, Routes ,Router,ActivatedRoute} from '@angular/router';

constructor(private router: Router, private route: ActivatedRoute) { 
      this.route.params.subscribe(params => {
             console.log(params);
      });
}

RouterModule：无法读取属性＆＃39; forRoot＆＃39;未定义的

1 个答案: