Angular2 Init variables in template.

Question

When I run the application , the console shows all the logs that I have ngOnInit , but the application generates only a skeleton view , without displaying variables of the component and texts from l18n . ngOnInit or not working as it should , because I have to be called in the constructor .

These problems disappear when the second time I click on a link to a component, then everything is loaded as it should. This happens in all components in the application and all applications that builds on angular2 starter gulp .

Why only second click loads the variables to view and calls ngOnInit ( when it is called in the constructor ) ?

export class SettingsDevicesComponent implements OnInit {

**variables**

@Component({
  selector: 'as-settings-devices',
  templateUrl: 'app/settings-devices/settings-devices.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  styleUrls: ['app/settings-devices/settings-devices.component.css'],
  providers: [Communication],
  pipes: [TranslatePipe],
  directives: [REACTIVE_FORM_DIRECTIVES, NgClass, NgStyle, CORE_DIRECTIVES,ROUTER_DIRECTIVES]
})

constructor(private _cm: Communication,
            private _cdRef: ChangeDetectorRef,
            private _router: Router,
            private _sanitizer: DomSanitizationService,
            @Inject(ElementRef) elementRef: ElementRef
            ) {
                this.elementRef = elementRef;
                this.ngOnInit();
                this.fileUpload = new FormGroup({
                    color: this.color
                });
                this.fileName = new FormGroup({
                    fileNameInput: this.fileNameInput
                });
                this.settingsName = new FormGroup({
                    settingsNameInput: this.settingsNameInput
                });
            }

ngOnInit() {
    this.getDeviceData();
    this.getZoneData();
}
}

Do you get any errors in the browser console. This sounds like a timing issue. What are getDeviceData() and getZoneData() doing? Calling them from constructor or ngOnInit() shouldn't make much difference. — Günter Zöchbauer
– Günter Zöchbauer, Commented Jun 28, 2016 at 7:14
If you call ngOnInit() from your constructor, this.getDeviceData();this.getZoneData(); is executed twice. It would be better to move this code to the constructor if you depend on it being executed there, instead of calling ngOnInit() from the constructor. — Günter Zöchbauer
– Günter Zöchbauer, Commented Jun 28, 2016 at 7:17
Then it shouldn't matter where you call them, they are executed async and there is no guarantee when the response will arrive. It won't arrive while the constructor is executed for sure. — Günter Zöchbauer
– Günter Zöchbauer, Commented Jun 28, 2016 at 7:20
I also have components that do not have any sites http , and also after the first click occurs view without changing after the second click, jump variables — Emerceen
– Emerceen, Commented Jun 28, 2016 at 7:51

Emerceen · Accepted Answer · 2016-06-28 08:32:01Z

1

The problem was changeDetection: ChangeDetectionStrategy.OnPush in main component 'app.component.ts'

This caused a problem:

@Component({
  selector: 'as-main-app',
  templateUrl: 'app/app.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  directives: [ROUTER_DIRECTIVES]
})

After removing everything is ok:

@Component({
  selector: 'as-main-app',
  templateUrl: 'app/app.html',
  directives: [ROUTER_DIRECTIVES]
})

answered Jun 28, 2016 at 8:32

Emerceen

2,8853 gold badges19 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular2 Init variables in template.

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related