指定されたパラメータが呼び出しターゲットのシグネチャと一致しませんクラスのインスタンス化でスローされました

Question

router.navigateByUrlのそれぞれをクラスの関数にラップしようとしていて、その関数を関連する場所で呼び出す予定です。しかし、 'Supplied parameters'をスローすると、コールターゲットのシグネチャと一致しません。私はSOでいくつかの他のリンクをたどってきたが、どれも私の場合には

// 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

commonRouter.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は注入可能ですので、あなたのRouterComponentクラスをどのように扱うかをAngularが知っていれば解決できます。

クラスを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(); 
    } 
}; 

これは注入可能であるため、角度はパラメータの解決方法を知っています。

RouterComponentクラスの命名規則を選択すると、他の人は角度componentとして装飾されていると考えられますが、serviceとして使用しています。