无法将数据传递和访问数据到Angular中的无状态组件

Question

I'm trying something very simple but having alot of trouble. I have a container component and child component:

-- street.dashboard.component
---- street.search.component

I'm doing a service call and setting data in my dashboard component and then passing it through using

<street-search locations="streets"></search> 

however, in my child component, I can not get access to that data within my class? I can render it in the template fine and see that it's getting passed through, but cannot access it in my class.

Any ideas?

street-dashbaord.component

@Component({
    selector: 'street-dashboard',
    styleUrls: ['street-dashboard.component.scss'],
    template: `
       <street-search locations="streets"></street-search>
    `

export class StreetDashboardComponent implements OnInit {
    streets: any;
    constructor(private streetService: StreetDashboardService ) {}
    ngOnInit() {
        console.log("ngOnInit");
        this.streetService
        .getStreets()
        .subscribe((data: Street[]) => this.streets = data);
    }
}

street-search-component

@Component({
    selector: 'street-search',
    template: `
        {{ locations.length }} <!-- This renders fine -->
        <md-input-container> 
            <input type="text" mdInput placeholder="Enter your street..."
            [formControl]="myControl" [mdAutocomplete]="auto">  
        </md-input-container>

        <md-autocomplete #auto="mdAutocomplete" showPanel="false">
            <md-option *ngFor="let option of filteredOptions | async" 
            [value]="option" (onSelectionChange)="selected($event, option)">
                {{ option }}
            </md-option>
        </md-autocomplete>
    `
});

export class StreetSearchComponent {
    @Input()
    locations: any;

    constructor () {
       console.log("Locations: ", this.locations); // Undefined ??
    }
}

Despite seeing the locations.length in the browser, I do also get a console error of

ERROR TypeError: Cannot read property 'length' of undefined

I've also tried using ngOnInit in the child component but no joy. Thanks

Answer 1

@Input is first available in OnChanges (constructor is run first of all, so not available there), so usually it's available then in OnInit , but since the retrieval of data is async, I'm guessing it will still be undefined when OnInit is run in child.

You can watch for the changes in @Input variable in OnChanges , which is fired when changes happen to the Input variable, so try:

ngOnChanges() {
  if(!locations.length) {
    console.log('not yet!')
  } else {
    console.log(locations)
  }
}

And as Aluan kindly pointed out, you have also forgotten [ ] around locations . With the brackets you are actually binding your variable streets , so it should be:

<street-search [locations]="streets"></search>