javascript - Angular 2 - 通过输入将对象传递给组件

Question

在我的父页面上，我有一个链接:

<a (click)="showPermissionsRates(5757);">Link</a>

函数设置它:

showPermissionsRates(item) {
        this.currentEventPoolId = item;
    }

在父页面上有一个子组件:

<app-event-pools-permissions-rates [eventPoolId]="currentEventPoolId "></app-event-pools-permissions-rates>

然后在我的子组件 TS 文件中使用:

inputs: ['eventPoolId']

但是如何在子组件中获取“5757”的值？比如使用alert？

Answer 1

您应该能够在子属性上使用@Input()。

我将其放在一起，展示了一个非常基本的示例，但是如果没有更多关于您的问题的信息，很难知道您需要什么: https://plnkr.co/edit/y9clOla1WrPFmhMJoz7o?p=preview

要点是使用 @Input() 标记子组件中的输入，并将这些输入映射到父组件的模板中。

import {Component} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

import { ChildComponent } from 'child.component.ts';

@Component({
  selector: 'my-app',
  template: `
    <div>
      <button (click)="changeProperty('ABC 123')">Click Me!</button>
    
      <child-component [childProperty]="parentProperty"></child-component>
    </div>
  `,
})
export class App {
  public parentProperty: string = "parentProp";
  
  public changeProperty(newProperty: string) : void {
    this.parentProperty = newProperty;
  }
}

然后，在 child 中:

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

@Component({
  selector: 'child-component',
  template: `
    <div>Hello World: {{ childProperty }}</div>
  `,
})
export class ChildComponent {
  
  @Input()
  childProperty:string;
  
  constructor() {
    this.childProperty = 'childProp'
  }
}