温泉UI 2演示：属性不存在

Question

https://github.com/OnsenUI/angular2-onsenui-kitchensink的“hello world”示例对我无效。经过NPM开始我收到以下错误：

ERROR in [default] ../angular2-onsenui-kitchensink/src/app/components/animations/animations.ts:45:20 
Property 'pushPage' does not exist on type 'OnsNavigator'. 

ERROR in [default] ../angular2-onsenui-kitchensink/src/app/components/animations/animations.ts:46:37 
Property 'popPage' does not exist on type 'OnsNavigator'. 

ERROR in [default] ../angular2-onsenui-kitchensink/src/app/components/home/home.ts:27:20 
Property 'pushPage' does not exist on type 'OnsNavigator'. 

ERROR in [default] ../angular2-onsenui-kitchensink/src/app/components/tabbar/tabbar.ts:23:20 
Cannot find name 'ons'. 

我已经更换了pushComponent到pushPage但它并没有帮助。有没有人有Onsen UI 2和AngularJS2的工作演示项目？

我tabbar.ts：

import {Component} from '@angular/core'; 
import {Routes, ROUTER_DIRECTIVES} from '@angular/router'; 

@Component({ 
    selector: 'tabbar', 
    providers: [], 
    pipes: [], 
    directives: [ROUTER_DIRECTIVES], 
    templateUrl: 'app/components/tabbar/tabbar.html', 
    styleUrls: ['app/components/tabbar/tabbar.css'], 
}) 
export class Tabbar { 
    tabs: Array<any>; 
    material: boolean; 

    constructor() { 
    this.tabs = [ 
     { path: '/home',  label: 'Home',  }, 
     { path: '/forms',  label: 'Forms',  }, 
     { path: '/dialogs', label: 'Dialogs', }, 
     { path: '/animations', label: 'Animations', }, 
    ]; 
    this.material = ons.platform.isAndroid(); 
    } 

    updateStyle(platform: string) { 
    this.material = platform === 'android'; 
    } 
} 

我animation.ts：

import {Component, Inject, forwardRef} from '@angular/core'; 
import {ONS_DIRECTIVES, OnsNavigator} from 'angular2-onsenui'; 

@Component({ 
    selector: 'ons-page', 
    template: ` 
    <div class="waiting">Please wait...</div> 
    `, 
    styles: [` 
    .waiting { 
     text-align: center; 
     font-size: 24px; 
     margin: 100px auto 0; 
    } 
    `], 
    providers: [], 
    directives: [ONS_DIRECTIVES], 
    pipes: [] 
}) 
export class TempPage { 
    animations = ['none', 'fade', 'slide', 'lift']; 

    constructor(@Inject(forwardRef(() => OnsNavigator)) private _navigator : OnsNavigator) { 
    } 

    ngOnInit() { 

    } 
} 

@Component({ 
    selector: 'animations', 
    templateUrl: 'app/components/animations/animations.html', 
    providers: [], 
    directives: [ONS_DIRECTIVES], 
    pipes: [] 
}) 
export class Animations { 
    animations = ['none', 'fade', 'slide', 'lift']; 

    constructor(@Inject(forwardRef(() => OnsNavigator)) private _navigator : OnsNavigator) { 
    } 

    push(animation) { 
    this._navigator.pushPage(TempPage, { animation }); 
    setTimeout(() => this._navigator.popPage(), 1500); 
    } 

    ngOnInit() { 

    } 
} 

预先感谢您！

Answer 1

问题是一个过时的AngularJS与依赖关系。 github存储库现在是最新的，问题已经消失。