提供的参数不匹配，调用对象的任何错误签名会被抛出

Question

类

我试图总结每个router.navigateByUrl一类的函数实例化和打算调用相关地方的功能。但是这样做抛出'Supplied参数不匹配任何调用目标的签名'。我跟随在这么少的其他环节，但没有一个似乎是有帮助的在我的情况

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 
} 

APP-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参数。路由器是一种可注射的，如果角知道如何处理你的RouterComponent类因而会分辨。

这将是最好的装饰类为Injectable，并在角分量注入价值。例如

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(); 
    } 
}; 

因为它是一种注射，角知道如何解决的参数。

您为RouterComponent类选择命名常规会导致其他人认为它被修饰为角component，但您将其用作service。