为什么在 @Input 中传递自定义 object 不起作用？

Question

我正在尝试通过@Input 传递自定义 object。但是，我得到 null 作为输出。

这是我的 child 组件 class:

import { Component, OnInit, Input } from '@angular/core';
import { Element } from '../app.element';

@Component({
  selector: 'app-server-element',
  templateUrl: './server-element.component.html',
  styleUrls: ['./server-element.component.css']
})
export class ServerElementComponent implements OnInit {
//  @Input('srvElement') element: {type: string, name: string, content: string};    <--- This works

  @Input('srvElement') ele:Element;   <--- This doesn't work

  constructor() { }

  ngOnInit() { }

}

这是我的 element class:

export class Element{
  type: string;
  name: string;
  content: string;
  constructor(type: string="", name: string="", content: string=""){
    this.type = type;
    this.name = name;
    this.content = content;
  }
}

在 parent class 的 html 即 app.component.html 中，我有这个（与 child class 通信）：

<div class="container">
  <app-cockpit (notify)="onNotifyClicked($event)"></app-cockpit>
  <hr>
  <div class="row">
    <div class="col-xs-12">
      <app-server-element *ngFor="let serverElement of serverElements"
      [srvElement]="serverElement"></app-server-element>
    </div>
  </div>
</div>

Parent class 即 app.component.ts:

import { Component } from '@angular/core';
import { Element } from './app.element';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  serverElements = [{type: 'server', name: 'Testserver', content: 'Just a test'}];
  element: {type: string, name: string, content: string};

  onNotifyClicked(e: Element){
    if(e.type==='server'){
        this.serverElements.push({
        type: 'server',
        name: e.name,
        content: e.content
      });
    } else {
        this.serverElements.push({
        type: 'blueprint',
        name: e.name,
        content: e.content
      });
    }
  }
}

任何人都可以向我解释为什么 @Input('srvElement') ele:Element; 没有工作 也没有 @Input('srvElement') let ele=new Element(); (通过我自己的自定义 object) 但 @Input('srvElement') element: {type: string, name: string, content: string}; 只是 工作正常??

Answer 1

我有一个工作示例，我将输入定义为：

import {Element} from 'placeWhereThisIs';
...

@Input() srvElement: Element;

Answer 2

您需要将循环的父元素，子元素是您的子组件。

<div *ngFor="let serverElement of serverElements">
  <app-server-element 
       [srvElement]="serverElement"></app-server-element>  
</div>

检查子组件中的下行

ngOnChanges() {
   console.log(this.ele);
 }

应该可以。

您在 onNotifyClicked 事件中编写的任何代码都会将该代码放入 ngOnChanges。

因为您的父组件的 for 循环在加载子组件后进行迭代，您需要通知子组件输入参数发生更改，这就是您需要 ngOnChanges 事件的原因。

Answer 3

我刚刚发现执行这两个选项中的任何一个都有效：

@Input('srvElement') element=new Element();
@Input('srvElement') element:Element;

注意： Object 的名称必须是 element 因为它已在 child class 的 html 即 server-element.component.html.

Answer 4

我想这可能是因为 Element 类型定义也属于 HTML 元素。但我在 plunker 中尝试过这个并且效果很好。您应该在更改 Element class 的名称后尝试。这是 Plunker https://plnkr.co/edit/RSPoEEub1mtr2BC4sqxQ?p=preview

为什么在 @Input 中传递自定义 object 不起作用？

Why passing custom object in @Input doesn't work?

angular2-databinding

angular