I recently updated my Angular2 application from Angular2-beta6 to RC4. I
also updated typescript to 1.8.10. Since the upgrade I have experienced a
few issues, most of which I have resolved. However, I am having an issue
with one of components and passing Input properties to other components.
My component is a MegaMenu control that is driven from JSON data. There are
three components that make up the MegaMenu.
megamenu.component.ts ( <bi-megamenu></bi-megamenu> )
megamenu-parent.component.ts ( <bi-megamenu-parent></bi-megamenu-parent> )
megamenu-child.component.ts ( <bi-megamenu-child></bi-megamenu-parent> )
The root component is loaded and has a service that fetches the JSON data
from a rest endpoint. The root HTML has a several column and has the
following directive inside each column:
<bi-megamenu-parent [megaMenuItems]="megaMenuItems" [column]="'1-Top'"
[parent]="p.Id"></bi-megamenu-parent>
This 'should' pass the megaMenuItems array from the model (Service) as well
as the column and parent values to the parent component. The parent
component is set to receive those values via Input params.
@Input() megaMenuItems: IMegamenuItem[];
@Input() parent: string;
@Input() column: string;
If I spit these values out to the console I get the correct values for the
parent and column params but the megaMenuItems array is undefined. This
just started happening with the recent upgrade. I am not getting any errors
in the console either. Any help would be appreciated. I have attached the
necessary files.
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
import { Component, OnInit } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
import { MegaMenuService } from './megamenu.service';
import { MegaMenuParentComponent } from './megamenu-parent.component';
import { MegaMenuChildComponent } from './megamenu-child.component';
import { IMegamenuItem } from './megamenuitem';
import { OrderBy } from '../shared/orderby-filter.pipe';
import { FilterMegaMenuItems } from '../shared/megaMenuItems-filter.pipe';
@Component({
selector: 'bi-megamenu',
templateUrl: '/app/megamenu/megamenu.component.html',
pipes: [ OrderBy, FilterMegaMenuItems ],
directives: [ ROUTER_DIRECTIVES, MegaMenuParentComponent, MegaMenuChildComponent]
})
export class MegaMenuComponent implements OnInit {
parentItems = [
{
title: "Our Firm",
Id: "1"
},
{
title: "Legal Practice",
Id: "2"
},
{
title: "Administrative Services",
Id: "3"
},
{
title: "HR",
Id: "4"
},
{
title: "Learning & Development",
Id: "5"
}
];
megaMenuItems: IMegamenuItem[];
errorMessage: string;
constructor(private _megamenuService: MegaMenuService) {
}
ngOnInit(): void {
this._megamenuService.getMegaMenuItems()
.subscribe(
items => this.megaMenuItems = items,
error => this.errorMessage = <any>error
);
}
}import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { IMegamenuItem } from './megamenuitem';
@Injectable()
export class MegaMenuService {
//Dev JSON dump
private _megamenuUrl = "/api/megamenu/items.json";
constructor(private _http: Http) { }
getMegaMenuItems(): Observable<IMegamenuItem[]> {
return this._http.get(this._megamenuUrl)
.map((response: Response) => <IMegamenuItem[]> response.json().d.results)
.do(data => console.log("MegaMenu Payload: " + data.length))
.catch(this.handleError);
}
private handleError(error: Response) {
// in a real world app, we may send the server to some remote logging infrastructure
// instead of just logging it to the console
console.error(error);
return Observable.throw(error.json().error || 'Server error');
}
}
import { Component, Input, OnInit } from '@angular/core';
import { IMegamenuItem } from './megamenuitem';
import { OrderBy } from '../shared/orderby-filter.pipe';
import { FilterMegaMenuItems } from '../shared/megaMenuItems-filter.pipe';
@Component({
selector: 'bi-megamenu-child',
templateUrl: '/app/megamenu/megamenu-child.component.html',
pipes: [ OrderBy, FilterMegaMenuItems ]
})
export class MegaMenuChildComponent implements OnInit {
@Input() megaMenuItems: IMegamenuItem[];
@Input() parent: string;
@Input() column: string;
ngOnInit(): void {
//console.log("Parent [Child]: " + this.parent);
}
}export interface IMegamenuItem {
Title: string;
Url: string;
SortOrder: number;
Column: string;
Icon: string;
Active: boolean;
Divider: boolean;
ParentId: string;
Target: string;
StartPage: boolean;
}
import { Component, Input, OnInit } from '@angular/core';
import { IMegamenuItem } from './megamenuitem';
import { MegaMenuChildComponent } from './megamenu-child.component';
import { OrderBy } from '../shared/orderby-filter.pipe';
import { FilterMegaMenuItems } from '../shared/megaMenuItems-filter.pipe';
@Component({
selector: 'bi-megamenu-parent',
templateUrl: '/app/megamenu/megamenu-parent.component.html',
pipes: [ OrderBy, FilterMegaMenuItems ],
directives: [ MegaMenuChildComponent ]
})
export class MegaMenuParentComponent implements OnInit {
@Input() megaMenuItems: IMegamenuItem[];
@Input() parent: string;
@Input() column: string;
ngOnInit(): void {
console.log(this.megaMenuItems);
}
}
{{c.Title}}
