Angular2 组件之间的数据绑定答案

【问题标题】：Angular2 Data binding between ComponentsAngular2 组件之间的数据绑定
【发布时间】：2017-05-13 11:05:26
【问题描述】：

我最近开始基于 MEAN 堆栈开发 Angular2 应用程序，但在数据绑定方面遇到了一些问题。我查看了文档和这里的每个问题，但我找不到我的错误。我希望有人能够指出我正确的方向。

我的一个组件被

调用

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

CanvasBlockCardComponent 接受这两个属性：

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

}

【问题讨论】：

标签： angular2-routing angular2-template

【解决方案1】：

我对您尝试绑定数据的方式感到困惑。根据您上面的代码，您正在尝试将数据绑定到“a”元素，这不是您的 Angular 组件，这就是为什么您会得到那些不言自明的错误。

根据我的猜测，您可能正在寻找的是：

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

希望对你有帮助

【讨论】：