带有angular2的onsenui - 使用带有错误的ons-switch标签

时间:2016-12-01 10:33:10

标签: angular onsen-ui2

我尝试使用Angular2进行onsenui。

通过monaca CLI创建示例应用程序。

“使用”ons-switch“标签时无法读取未定义的属性'addEventListener'错误

请帮助

错误↓↓↓

EXCEPTION: Error in ./MyApp class MyApp - inline template:6:0 caused by: Cannot read property 'addEventListener' of undefined

这是app.ts↓

import {Component, onsNotification, OnsSwitch} from 'angular2-onsenui';
@Component({
  selector: 'app',
  template: `
<ons-page>
  <ons-toolbar>
    <div class="center">Home</div>
  </ons-toolbar>
<ons-switch></ons-switch>
  <div class="content">
    <ons-list>
      <ons-list-header>Dialog Sample</ons-list-header>
      <ons-list-item (click)="alert()">Alert</ons-list-item>
    </ons-list>
  </div>
</ons-page>

`,
  styles: [require('./app.css')]
})
export class MyApp {
  target: boolean = true;

  constructor() {}

  alert() {
    onsNotification.alert('This is an Onsen UI alert notification test.');
  }
}

这是main.ts↓

// Onsen UI Styling and Icons
require('onsenui/stylus/blue-basic-theme.styl');
require('onsenui/css/onsenui.css');

// Application code starts here
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {enableProdMode, NgModule, CUSTOM_ELEMENTS_SCHEMA, OnsenModule} from 'angular2-onsenui';

import {MyApp} from './app/app';

// Enable production mode when in production mode.
if (process.env.NODE_ENV === 'production') {
  enableProdMode();
}

@NgModule({
    imports: [
        OnsenModule,
    ],
    declarations: [
        MyApp,
    ],
    bootstrap: [
        MyApp,
    ],
    schemas: [
        CUSTOM_ELEMENTS_SCHEMA,
    ],
})
class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));

package.json↓

{
  "name": "onsenui-v2-angular2-minimum",
  "version": "2.2.2+20161122.3",
  "description": "",
  "dependencies": {
    "@angular/common": "2.1.2",
    "@angular/compiler": "2.1.2",
    "@angular/compiler-cli": "2.1.2",
    "@angular/core": "2.1.2",
    "@angular/http": "2.1.2",
    "@angular/platform-browser": "2.1.2",
    "@angular/platform-browser-dynamic": "2.1.2",
    "angular2-onsenui": "1.0.0-rc.1",
    "core-js": "^2.4.1",
    "onsenui": "^2.0.0",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.0-beta.12",
    "typescript": "^2.0.9",
    "zone.js": "0.6.26"
  }
}

0 个答案:

没有答案