Я пытаюсь передать пользовательский объект через @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} } просто отлично работает ??
4 ответа
Я только что узнал, что выполнение любого из этих двух вариантов работает:
@Input('srvElement') element=new Element();
@Input('srvElement') element:Element;
ПРИМЕЧАНИЕ: имя объекта должно быть element
, так как оно использовалось в html дочернего класса, т.е. server-element.component.html
.
Вам нужен родительский элемент, который будет зацикливаться, а дочерний элемент - это ваш дочерний компонент.
<div *ngFor="let serverElement of serverElements">
<app-server-element
[srvElement]="serverElement"></app-server-element>
</div>
Проверьте ниже строки в вашем дочернем компоненте
ngOnChanges() {
console.log(this.ele);
}
Он должен работать.
Код, который вы пишете в событии onNotifyClicked, помещает этот код в ngOnChanges.
Поскольку ваш родительский компонент для цикла повторяется после загрузки дочернего компонента, вам необходимо уведомить, что входной параметр дочернего компонента изменяется, поэтому вам необходимо событие ngOnChanges.
Я думаю, что это может быть связано с тем, что определение типа Element
также относится к элементам HTML. Но я попробовал это в plunker
и работал очень хорошо. Вы должны попробовать после изменения имени класса Element
. Вот Plunker https://plnkr.co/edit/RSPoEEub1mtr2BC4sqxQ/p=preview >
У меня есть пример работы, где я определяю вход как:
import {Element} from 'placeWhereThisIs';
...
@Input() srvElement: Element;
Новые вопросы
angular
Вопросы по Angular (не путать с AngularJS), веб-фреймворку от Google. Используйте этот тег для угловых вопросов, которые не относятся к конкретной версии. Для более старой веб-платформы AngularJS (1.x) используйте тег angularjs.