Closed dgroh closed 8 years ago
resize method is working for me on content on RC0, just following the basic examples in the ionic docs for it.
Use setElementClass()
instead of addCssClass
. And resize()
is working to me.
Are you sure setElementClass() works @manucorporat ?
Error in ./HeaderContentComponent class HeaderContentComponent - inline template:10:27 caused by: Cannot read property 'setElementClass' of undefined ErrorHandler.handleError @ error_handler.js:47 next @ application_ref.js:272 schedulerFn @ async.js:82 SafeSubscriber.tryOrUnsub @ Subscriber.js:223 SafeSubscriber.next @ Subscriber.js:172 Subscriber._next @ Subscriber.js:125 Subscriber.next @ Subscriber.js:89 Subject.next @ Subject.js:55 EventEmitter.emit @ async.js:74 onError @ ng_zone.js:119 onHandleError @ ng_zone_impl.js:64 t.handleError @ polyfills.js:3 e.runGuarded @ polyfills.js:3 NgZoneImpl.runInnerGuarded @ ng_zone_impl.js:72 NgZone.runGuarded @ ng_zone.js:235 outsideHandler @ dom_events.js:26 t.invokeTask @ polyfills.js:3 e.runTask @ polyfills.js:3 invoke @ polyfills.js:3 error_handler.js:49 ORIGINAL EXCEPTION: Cannot read property 'setElementClass' of undefined ErrorHandler.handleError @ error_handler.js:49 next @ application_ref.js:272 schedulerFn @ async.js:82 SafeSubscriber.__tryOrUnsub @ Subscriber.js:223 SafeSubscriber.next @ Subscriber.js:172 Subscriber._next @ Subscriber.js:125 Subscriber.next @ Subscriber.js:89 Subject.next @ Subject.js:55 EventEmitter.emit @ async.js:74 onError @ ng_zone.js:119 onHandleError @ ng_zone_impl.js:64 t.handleError @ polyfills.js:3 e.runGuarded @ polyfills.js:3 NgZoneImpl.runInnerGuarded @ ng_zone_impl.js:72 NgZone.runGuarded @ ng_zone.js:235 outsideHandler @ dom_events.js:26 t.invokeTask @ polyfills.js:3 e.runTask @ polyfills.js:3 invoke @ polyfills.js:3 error_handler.js:52 ORIGINAL STACKTRACE: ErrorHandler.handleError @ error_handler.js:52 next @ application_ref.js:272 schedulerFn @ async.js:82 SafeSubscriber.tryOrUnsub @ Subscriber.js:223 SafeSubscriber.next @ Subscriber.js:172 Subscriber._next @ Subscriber.js:125 Subscriber.next @ Subscriber.js:89 Subject.next @ Subject.js:55 EventEmitter.emit @ async.js:74 onError @ ng_zone.js:119 onHandleError @ ng_zone_impl.js:64 t.handleError @ polyfills.js:3 e.runGuarded @ polyfills.js:3 NgZoneImpl.runInnerGuarded @ ng_zone_impl.js:72 NgZone.runGuarded @ ng_zone.js:235 outsideHandler @ dom_events.js:26 t.invokeTask @ polyfills.js:3 e.runTask @ polyfills.js:3 invoke @ polyfills.js:3 error_handler.js:53 TypeError: Cannot read property 'setElementClass' of undefined at HeaderContentComponent.toggleToolbar (checkin-checkout-storage.js:58) at _View_HeaderContentComponent0._handle_click_11_0 (HeaderContentComponent.ngfactory.js:349) at view.js:403 at dom_renderer.js:249 at dom_events.js:26 at t.invoke (polyfills.js:3) at Object.onInvoke (ng_zone_impl.js:43) at t.invoke (polyfills.js:3) at e.runGuarded (polyfills.js:3) at NgZoneImpl.runInnerGuarded (ng_zone_impl.js:72)
Why should my Content be undefined? It worked (same code) in Beta 11.
Can you share the code you are using?
import { Component, Input } from "@angular/core";
import { Content } from "ionic-angular";
@Component({
selector: "header-content-component",
templateUrl: "header-content.html"
})
export class HeaderContentComponent {
@Input("title") public title: string;
@Input("content") public content: Content;
public toolbarActive: boolean;
public toggleToolbar() {
this.toolbarActive = !this.toolbarActive;
if (this.toolbarActive) {
// Remove scroll from content
} else {
// Add scroll to content
}
this.content.resize();
}
}
Here is how we use this:
<ion-header class="{{subject}}" no-shadow>
<header-content-component [title]="subject" [content]="content"></header-content-component>
</ion-header>
Here is where we get Content from (it is a base class of our pages):
import { ViewChild } from "@angular/core";
import { NavController, NavParams, Content } from "ionic-angular";
import { BackendService } from "../backend/backend.service";
import { Navigation } from "../backend/navigation";
import { Transition } from "../backend/transition";
import { Condition } from "../backend/condition";
export abstract class PageBase<T> {
constructor(protected nav: NavController, protected params: NavParams, protected backendService: BackendService) {
}
@ViewChild(Content) public content: Content;
protected models: Array<T> = [];
protected subject: string;
protected type: string;
protected title: string;
protected breadcrumb: string;
protected description: string;
protected loadNavigation(target: string): void {
this.backendService.getNavigation(target).subscribe((navigation: Navigation) => {
this.subject = navigation.subject;
this.type = navigation.type;
this.title = navigation.title;
this.breadcrumb = navigation.breadcrumb;
this.description = navigation.description;
}, err => {
console.log(err); // TODO: Proper error handling
});
}
protected loadTransitions(target, onDone: Function) {
this.backendService.getTransitions(target).subscribe((transitions: Array<Transition>) => {
transitions.forEach(transition => {
if (transition.conditions) {
transition.conditions.forEach((condition: Condition) => onDone(condition));
}
});
}, err => {
console.log(err); // TODO: Proper error handling
});
}
}
No matter what, it now says that Content is undefined
As I said. It is exactly the same code from Beta 11. Except that the method to add and remove css class is gone.
Hello @manucorporat I created a repo to help Ionic team to identify the issue: https://github.com/dgroh/RepoDemoForIssues
Please let me know if you have further questions.
@dgroh angular 2 decorators must be used in the class with the @Component @Directive decorator. You can't use @ViewChild is a base class. It has not effect.
That is really bad, but then this has nothing to do with Ionic. It's an Angular problem, which was not ocurring in Angular RC4.
I have to reference always the same @ViewChild
for all classes. I'll report this to Angular2
@dgroh I am sure they are aware of this: https://github.com/angular/angular/issues/5415 https://github.com/angular/angular/issues/10461 https://github.com/angular/angular/issues/11606 // << tracking progress
hehe
Wow, cheers, I was right now there looking for open issues. I'll read more there, thanks @manucorporat
Short description of the problem:
In Beta11 I was able to control the
Content
, i.eaddCssClass
method. Now this method is not there anymore. Theresize
method is also not working anymore.Which Ionic Version? 2 RC0
Run
ionic info
from terminal/cmd prompt:Cordova CLI: 6.3.1 Gulp version: CLI version 3.9.1 Gulp local: Ionic CLI Version: 2.1.0 Ionic App Lib Version: 2.1.0-beta.1 OS: Node Version: v4.6.0