爲什麼在@Input中傳遞自定義對象不起作用？

Question

我想通過@Input傳遞一個自定義對象。但是，我得到null作爲輸出。

這是我的孩子組件類：

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類：

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

在父類的HTML即app.component.html，我有這個（向子類通訊）：

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

父類即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();（通過我自己的自定義對象），但@Input('srvElement') element: {type: string, name: string, content: string};只是工作正常？

Answer 1

我剛剛發現做這兩種選擇的作品：

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

注：對象的必須是element因爲它已被使用的名稱在子類的html中，即server-element.component.html。

Answer 2

我有一個例子工作，我定義輸入爲：

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

@Input() srvElement: Element; 

Answer 3

需要父元素這將環和子元素是你的孩子組元。

<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 4

我想這可能是因爲Element類型定義也屬於HTML元素。但我在plunker試過這個，效果很好。您應該在更改Element類的名稱後嘗試。這裏是Plunker https://plnkr.co/edit/RSPoEEub1mtr2BC4sqxQ?p=preview