Я пытаюсь передать пользовательский объект через @Input. Но я получаю ноль в качестве вывода.

Это мой дочерний класс компонентов:

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(); (передает мой собственный объект), но {{X2} } просто отлично работает ??

2
BlackBeard 31 Авг 2017 в 16:39

4 ответа

Лучший ответ

Я только что узнал, что выполнение любого из этих двух вариантов работает:

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

ПРИМЕЧАНИЕ: имя объекта должно быть element, так как оно использовалось в html дочернего класса, т.е. server-element.component.html.

1
BlackBeard 31 Авг 2017 в 14:10

Вам нужен родительский элемент, который будет зацикливаться, а дочерний элемент - это ваш дочерний компонент.

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

Проверьте ниже строки в вашем дочернем компоненте

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

Он должен работать.

Код, который вы пишете в событии onNotifyClicked, помещает этот код в ngOnChanges.

Поскольку ваш родительский компонент для цикла повторяется после загрузки дочернего компонента, вам необходимо уведомить, что входной параметр дочернего компонента изменяется, поэтому вам необходимо событие ngOnChanges.

0
Pragnesh Khalas 31 Авг 2017 в 14:08

Я думаю, что это может быть связано с тем, что определение типа Element также относится к элементам HTML. Но я попробовал это в plunker и работал очень хорошо. Вы должны попробовать после изменения имени класса Element. Вот Plunker https://plnkr.co/edit/RSPoEEub1mtr2BC4sqxQ/p=preview >

0
Arun Redhu 31 Авг 2017 в 14:14

У меня есть пример работы, где я определяю вход как:

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

@Input() srvElement: Element;
0
Kevin 31 Авг 2017 в 13:45