Onsen UI 2 demo:属性不存在

Onsen UI 2 demo: property does not exist

本文关键字：属性 不存在 demo UI Onsen      更新时间：2023-09-26

https://github.com/OnsenUI/angular2-onsenui-kitchensink上的"hello world"示例不适合我。在输入npm start之后，我得到了以下错误:

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，但它没有帮助。有人有onsenui 2和AngularJS2的工作演示项目吗?

我的<<p> em> 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';
  }
}
我的<<p> em> 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() {
  }
}

提前感谢!

问题是一个过时的AngularJS依赖。github存储库现在是最新的，问题已经解决了。

相关文章：