Question

我最近开始基于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() {
  }

}

Answer 1

我对您尝试绑定数据的方式感到困惑。根据上面的代码，您正在尝试将数据绑定到＆＃34; a＆＃34;元素，它不是你的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>

希望有所帮助

组件

1 个答案: