应用错误收集

Angular 2 ng2-treeview

时间：2016-12-15 03:16:27

标签： angular ng2-bootstrap

嘿伙计们正在尝试使用typescript

创建角度为2的树结构

我没有运行时错误，编译错误或控制台错误。事情是我的模块没有加载如果有人能帮我弄清问题是什么

由于我发布了我的布局图片和使用的代码

Node.js using npm

的index.html

<!DOCTYPE html>
<html>

<head>
<title>Angular Tree</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="./style.css">      <linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<!-- 1. Load libraries -->
<!-- Polyfill for older browsers 
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script> 
<script src="node_modules/@reactivex/rxjs/dist/global/Rx.js"></script>
<script src="bundles/ng2-treeview.js"></script>-->
<script src="node_modules/typescript/lib/typescript.js"></script>
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>

<body>
<script>
    //NPM libraries
    // System.import("package.json!npm").then(function() {
    System.import('./Demo_Treeview/demo.final').catch(function(err) {
        console.error(err);
        // })
    });
</script>

<demo>
    <b>Loading...</b>
</demo>

</body>

</html>

demo.app.ts

//import { bootstrap } from '@angular/upgrade/src/angular_js';
import {Component} from '@angular/core';
//import {NodeEvent} from 'ng2-tree';

@Component({
selector: 'demo',
host: {
    '(mouseover)': 'hover()',
    '(mouseout)': 'blur()',
},
template: `<span (click)="nodeClick($event)" [style.background]="hovered ?       'green' : 'transparent'">{{ text }}</span>`
})
export class DemoappComponent {
hovered: boolean = false;
text: string;

set options(options:any) {
    this.text = options.text;
}

nodeClick(event:any) {
    console.log(this);
}
hover() {
    this.hovered = true;
}
blur() {
    this.hovered = false;
}
}

demo.module.ts

//import { TreeNode } from 'ng2-treeview';
import { NgModule,Component } from '@angular/core';   
import { BrowserModule } from '@angular/platform-browser';
import {TreeNode,TextTreeNode, ComponentTreeNode, TreeViewComponent,     TreeNodeOptions} from '../Treeimport';
//import {TreeComponent, TreeModel, NodeEvent} from 'ng2-tree';
import { Ng2BootstrapModule } from 'ng2-bootstrap/ng2-bootstrap';
import  {DemoappComponent}  from './demo.app';
@NgModule({
  declarations: [DemoappComponent],//TreeComponent ],
  imports:            [BrowserModule,TreeNode,TreeViewComponent,TextTreeNode,ComponentTreeNode,TreeNodeOptions,Ng2BootstrapModule],
  bootstrap:    [DemoappComponent]
})

 @Component(
    {
        selector: "demo",
        template: `
    <h1>Angular2-treeview</h1>
    <br>
    <h2>Text tree view</h2>
    <ng2-treeview [TreeNode]="textTreeView"       (textNodeClick)="textNodeClick($event)"></ng2-treeview>
    <ng2-treeview [TreeNode]="textTreeView2" (textNodeClick)="textNodeClick($event)"></ng2-treeview>
    <br>
    <h2>Component tree view</h2>
    <ng2-treeview [TreeNode]="componentTreeView"></ng2-treeview>
    `
     }
    )
export class DemomoduleComponent {

textTreeView = new TextTreeNode('Root Treenode', null, [
    new TextTreeNode('Music',null,[
        new TextTreeNode('<a href="www.123musiq.com">All Songs</a>'),
        new TextTreeNode('<a href="www.tamilbeat.com">TamilSongs</a>'),
    ]),
    new TextTreeNode('Feeling Bored',null,[
        new  TextTreeNode('Get a Life'),
        new TextTreeNode('Byeeeeee'),
    ]),
    new TextTreeNode('Video',null,[
        new TextTreeNode('Nothing 404 Error :-P'),
    ]),
    new TextTreeNode('Misc', null, [
        new TextTreeNode('Hello'),
        new TextTreeNode('Hiee'),
        new TextTreeNode('Hola'),
    ]),
    new TextTreeNode('Recylce'),
]);

options = new TreeNodeOptions({
    showExpandCollapse: true
});
textTreeView2 = new TextTreeNode('Root Treenode', null, [
    new TextTreeNode('Music',null,[
        new TextTreeNode('<a href="www.123musiq.com">All Songs</a>',null,[
            new TextTreeNode('Go Away'),
        ]),
        new TextTreeNode('<a href="www.tamilbeat.com">TamilSongs</a>', null,  [
            new TextTreeNode('Empty Go Away'),
        ]),
    ]),
    new TextTreeNode('Names', null, [
        new TextTreeNode('Feeling Bored',null,[
        new  TextTreeNode('Get a Life'),
        new TextTreeNode('Byeeeeee'),
    ]),
        new TextTreeNode('Hello', this.options),
        new TextTreeNode('Hiee', this.options, [
            new TextTreeNode('Nested'),
        ]),
        new TextTreeNode('Hola', this.options),
    ]),
    new TextTreeNode('Video'),
]);

componentTreeView = new ComponentTreeNode(DemoappComponent, new   TreeNodeOptions({ text: "demo-tree 1" }), [
    new ComponentTreeNode(DemoappComponent, new TreeNodeOptions({ text: "demo-tree 2" })),
    new ComponentTreeNode(DemoappComponent, new TreeNodeOptions({ text: "demo-tree 3" })),
    new ComponentTreeNode(DemoappComponent, new TreeNodeOptions({ text: "demo-tree 4" }), [
        new ComponentTreeNode(DemoappComponent, new TreeNodeOptions({ text: "demo-tree 5" })),
    ]),
    new ComponentTreeNode(DemoappComponent, new TreeNodeOptions({ text: "demo-tree 6" }),[
        new ComponentTreeNode(DemoappComponent, new TreeNodeOptions({text:"End of Tree"})

        )
    ]),
]);

textNodeClick(event:any) {
    console.log(event);
}

}

demo.final.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { DemomoduleComponent } from './demo.module';
import { enableProdMode } from '@angular/core';

enableProdMode();
platformBrowserDynamic().bootstrapModule(DemomoduleComponent);

System.config.js

(function(global) {
var bundles = {
    './bundles/ng2-treeview.js': ['ng2-treeview']
};
var paths = {
    // paths serve as alias
    'npm:': 'node_modules/',
    //"system-npm/*": "node_modules/system-npm/*.js"
};
// map tells the System loader where to look for things
var map = {
    // app is within this folder
    app: 'Demo_Treeview',
    // angular bundles
    '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
    '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
    '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
    '@angular/platform-browser': 'npm:@angular/platform- browser/bundles/platform-browser.umd.js',
    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
    '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
    '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
    '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
    '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
    // other libraries
    'moment': 'node_modules/moment/moment.js',
    'ng2-bootstrap/ng2-bootstrap': 'node_modules/ng2-bootstrap/bundles/ng2-bootstrap.umd.js',
    'rxjs': 'npm:rxjs/bundles/Rx.js',
    //'ng2tree': 'npm:systemjs/dist/system.js',
    '@reactivex': 'npm:@reactivex/rxjs/dist/global/Rx.js',
    'es6-shim': 'npm:/es6-shim/es6-shim.js',
    'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
        //'System-npm': 'npm:system-npm/npm-extension.js',
        //'ng2-treeview': 'npm:ng2-treeview/bundles/ng2-treeview.js',
        //"npm": "system-npm",
        //"npm-extension": "system-npm/npm-extension"
};
// packages tells the System loader how to load when no filename and/or no   extension
var packages = {
    app: {
        main: './demo.final',
        defaultExtension: 'js'
    },
    rxjs: {
        defaultExtension: 'js'
    }
};
var config = {
    bundles: bundles,
    paths: paths,
    map: map,
    packages: packages
};
System.config(config);
})(this);

Treeimport.ts只是我在ng2-treeview中使用的每个组件的导出功能，它位于src

bundle是ng2-treeview.js文件

希望有必要的文件

我长期坚持这个

0 个答案:

没有答案