提供的参数与 Class 的实例化时抛出调用目标错误的任何签名不匹配

Question

我试图将每个 router.navigateByUrl 包装在 class 的函数中，并计划在相关位置调用该函数。但是这样做会抛出'Supplied parameters do not match any signature of call target'。我关注了 SO 中的其他几个链接，但 none 似乎对我的情况有帮助

commonRouter.ts

 // have wrapped navigation to home in homePage
 // so wherever is needed this homePage will be called instead of 
 //this.router.navigateByUrl('/home');

import {Router} from '@angular/router';
export class RouterComponent{
  router:any;
  constructor(private rt:Router){
    this.router=rt;
  }
  homePage(){
    this.router.navigateByUrl('/home');
  }

}

someComponent.ts

// Importing the newly created typescript file
import {RouterComponent} from './../../app-routing-component';
@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.less']
})
export class LoginComponent implements OnInit {
  private ms:MainService= new MainService();
  //Instantiating RouterComponent
  private rt:RouterComponent = new RouterComponent(); // this line throwing error
  constructor(private fb:FormBuilder) {}
  someMethod(){
    rt.homePage() // Calling homePage
   }
   //... rest of code
}

应用-routing.module.ts

// module where all the paths and component are declared
import {NgModule} from "@angular/core";
import {RouterModule, Routes} from "@angular/router";
import {HomeComponent} from "./home/home/home.component";

const routes: Routes = [
  {
    path: 'login', component: LoginComponent,

  }, {
    path: 'home', component: HomeComponent,
    children: [{
      path: "account",
      component: AccountsComponent
    },{

    path: '**',
    component: PageNotFoundComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

Answer 1

您的 RouterComponent 需要一个 Router 参数。 Router 是可注入的，因此如果 Angular 知道如何处理你的 RouterComponent class 将是可解析的。

最好将你的 class 修饰为 Injectable 并在 Angular 组件中注入值。例如

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

@Injectable()
export class RouterService {
  constructor(private router: Router) { }

  homePage(){
    this.router.navigateByUrl('/home');
  }
};

将其注册到您的模块中，或将其作为依赖项添加到 Component 装饰器中的提供程序字段并将其导入到您的组件中。

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

@Component({ ... })
export class LoginComponent {
  constructor(private router: RouterService) { }

  toHomePage() {
    this.router.homePage();
  }
};

因为它是Injectable，Angular知道如何解析参数。

您的 RouterComponent class 命名约定的选择会导致其他人认为它被装饰为 Angular component，但您将其用作 service.

提供的参数与 Class 的实例化时抛出调用目标错误的任何签名不匹配

Supplied parameters do not match any signature of call target error is thrown on Instantiating of Class

javascript

angularjs

typescript

angular2-routing