Angular2 - モデル内でルータメソッドを使用する際に問題が発生しました

Question

角度ルータを使用してモデルでメソッドをトリガーしようとしていますが、コンポーネントビューからモデルを切り離しました。ここに私のコンポーネントである：

// we also need the Input module 
import { Component, OnInit, Input } from '@angular/core'; 

// Our model 
import { ArchiveProduct } from './archive-product.model'; 

@Component({ 
    selector: 'app-archive-product', 
    templateUrl: './archive-product.component.html', 
    styleUrls: ['./archive-product.component.css'] 
}) 
export class ArchiveProductComponent implements OnInit { 

    // input variables from archiveProduct and match them to the ArchiveProduct model 
    @Input() archiveProduct: ArchiveProduct; 

    selectPost(): any { 
    this.archiveProduct.selectPost(); 
    }  
    ngOnInit() { 
    } 

} 

そして、ここでは私のモデルである：

// Exports a class of ArchiveProduct 
import { Router } from '@angular/router'; 

export class ArchiveProduct { 

    // declare our props 
    title: string; 
    id: number; 
    slug: string; 

    // constructor 
    constructor(title: string, id: number, slug: string, private router: Router) { 
    this.title = title; 
    this.id = id; 
    this.slug = slug; 
    } 

    selectPost(slug) { 
    this.router.navigate([this.slug]); 
    } 

} 

私はエラー「付属parametersdoが任意の署名や目標と一致していない」だ瞬間。私は間違って何をしていますか？

Answer 1

あなたは間違った関数名を呼び出していますが、selectPostは存在しません。です。

不正

selectPost(): any { 
    this.archiveProduct.selectPost(); 
    } 

正しい

Answer 2

selectPost(): any { 
    this.archiveProduct.selectProduct(); 
    } 

1）ArchiveProductにおけるselectPostのコードは、それが入力パラメータを有する

selectPost(slug) { 
    this.router.navigate([this.slug]); 
    } 

あります。 TypeScriptでは、すべてのパラメータが関数で必要とされています。 しかし、あなたはそのようなパラメータなしArchiveProductComponentでそれを呼び出す：

selectPost(): any { 
    this.archiveProduct.selectPost(); 
    } 

2）ナビゲートする方法の代わりに、パラメータslugにそのselectPost

selectPost(slug) { 
    this.router.navigate([this.slug]); 
    } 

ArchiveProduct

でパス this.slugます。

Answer 3

私が気づいたのは、私が呼んでいたselectPostメソッドがArchiveProductComponentクラスから操作されていたことでした。だから私がしたのは、selectPostメソッドをarchive-product.componentに移動することでした。

import { Component, OnInit, Input } from '@angular/core'; 

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

// Our model 
import { ArchiveProduct } from './archive-product.model'; 

@Component({ 
    selector: 'app-archive-product', 
    templateUrl: './archive-product.component.html', 
    styleUrls: ['./archive-product.component.css'] 
}) 
export class ArchiveProductComponent implements OnInit { 

    constructor(private router: Router) { } 
    // input variables from archiveProduct and match them to the ArchiveProduct model 
    @Input() archiveProduct: ArchiveProduct; 

    ngOnInit() { 
    } 

    selectPost(slug) { 
    let route = 'product/' + slug; 
    this.router.navigate([route]); 
    } 

}