Question

我正在尝试使用带有属性类型选择器的子组件。我们如何将数据传递给此类组件

我的子组件选择器看起来像

selector: '[hello]'

，父组件模板写为

<ng-container *ngFor="let client of clients">
    <tr hello="client"></tr>
</ng-container>

其中客户端是对象

clients: any[] = [
    { firstName: 'Ajay', lastName: 'Kumat' },
    { firstName: 'Vijay', lastName: 'Kumar' }
]

当我尝试使用属性绑定作为

[hello]="client"

或将插值语法用作

hello="{{client}}"

我收到错误消息

无法绑定到“ hello”，因为它不是已知属性

https://stackblitz.com/edit/angular-attribute-selector-child-pass-data上的Stackblitz

PS：我确实尝试过使用google，但是我得到的只是将组件选择器用作元素

Answer 1

一种方法是使用与属性选择器Input()相同的名称创建一个hello属性。没有任何Input()属性，您将无法传递任何数据。

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

@Component({
  selector: '[hello]',
  template: `<td>{{hello.firstName}}</td>
  <td>{{hello.lastName}}</td>`
})
export class HelloComponent  {
  @Input() hello: any;
}

父项

<ng-container *ngFor="let client of clients">
    <tr [hello]="client"></tr>
</ng-container>

分叉的demo

将数据传递到与属性选择器一起使用的子组件

1 个答案: