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

但我怎样才能获得＆＃39; 5757＆＃39;在儿童组件？比如使用警报？

Answer 1

您应该只能在子属性上使用@Input（）。

我已经把它们放在一起展示了一个非常基本的例子，但是如果没有更多关于你的问题，你很难知道你需要什么： https://plnkr.co/edit/y9clOla1WrPFmhMJoz7o?p=preview

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

＆＃13;

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

＆＃13;

然后，在孩子身上：

＆＃13;

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

＆＃13;

Answer 2

我认为你在click事件中为输入变量设置值，然后你必须使用ngonchanges在子组件构造函数中监听它

 ngOnChanges(changes: SimpleChanges) {

            if(changes['eventpoolid'] && changes['eventpoolid'].currentValue) {
// you get updated value here
    }
    }

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

2 个答案: