我尝试使用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"
}
}