Angular2コンポーネント間のデータバインド

Question

最近、MEANスタックに基づいてAngular2 Appを開発し始めました。データバインディングにいくつか問題がありました。私はドキュメンテーションとここにあるすべての質問を見ましたが、間違いを見つけることはできません。私は誰かが正しい方向に私を指すことができることを願っています。

私のコンポーネントの1つは、両方の特性をCanvasBlockCardComponentに受け入れられている

<app-canvas-block-card [block]=block [canvas]=canvas></app-canvas-block-card> 

によって呼び出されます。

import { Component, OnInit, Input } from '@angular/core'; 
import { ICanvasBlock } from '../../../../interfaces/canvas-block.interface'; 
import { ICanvas } from '../../../../interfaces/canvas.interface'; 

@Component({ 
    selector: 'app-canvas-block-card', 
    templateUrl: './canvas-block-card.component.html', 
    styleUrls: ['./canvas-block-card.component.scss'] 
}) 
export class CanvasBlockCardComponent implements OnInit { 

    @Input() canvas: ICanvas; 
    @Input() block: ICanvasBlock; 

    constructor() { } 

    ngOnInit() { 
    console.dir(this.canvas); 
    console.dir(this.block); 
    } 

} 

しかし、私はによってCanvasBlockCardComponentのテンプレートの次のコンポーネントにバインドしてみてください使用：

<a [routerLink]="['/canvas', canvas._id, block._id]" [block]="block" [canvas]="canvas"><i class="fa fa-edit"></i></a> 

エラーが発生します。

Can't bind to 'block' since it isn't a known property of 'a'. 
Can't bind to 'canvas' since it isn't a known property of 'a'. 

リンクによって呼び出されるコンポーネント（CanvasDetailComponent）は次のようになります。

import { Component, OnInit, Input } from '@angular/core'; 
import { ICanvas } from '../../../../interfaces/canvas.interface'; 
import { ICanvasBlock } from '../../../../interfaces/canvas-block.interface'; 

@Component({ 
    selector: 'app-canvas-detail', 
    templateUrl: './canvas-detail.component.html', 
    styleUrls: ['./canvas-detail.component.scss'] 
}) 
export class CanvasDetailComponent implements OnInit { 

    @Input() canvas: ICanvas; 
    @Input() block: ICanvasBlock; 

    constructor() {} 

    ngOnInit() { 
    } 

} 

Answer 1

私はあなたのデータをバインドしようとしている方法が混乱しています。上のコードでは、 "a"要素にデータをバインドしようとしていますが、これはあなたの角の要素ではありません。であるため

は、あなたが探して、私の推測で、おそらくどのようなものです：

<canvas-detail-component [block]="block" [canvas]="canvas"></canvas-detail-component> 

そして、その構成要素の中、あなたはレンダリングするHTMLがあるでしょう、あなたのコードを持つことになります場所があります：

<a [routerLink]="['/canvas', canvas._id, block._id]"> 
    <i class="fa fa-edit"></i> 
</a> 

希望します。