不能为离子2

时间：2017-07-10 17:53:10

标签： javascript angularjs node.js d3.js ionic-framework

我很难运行这个例子 https://github.com/abritopach/ionic2-d3js-example

我安装了最新的离子2版本，npm等，但如果我尝试运行应用程序，我在浏览器控制台中出错。

polyfills.js:3 Unhandled Promise rejection: Template parse errors:
Can't bind to 'tabRoot' since it isn't a known property of 'super-tab'.
1. If 'super-tab' is an Angular component and it has 'tabRoot' input, then verify that it is part of this module.
2. If 'super-tab' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to > the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("<super-tabs height="100%">
        <super-tab [ERROR ->][tabRoot]="tab1Root" title="Line Chart"></super-tab>
        <super-tab [tabRoot]="tab2Root" title="Bar C"): ng:///AppModule/TabsPage.html@1:15
    Can't bind to 'tabRoot' since it isn't a known property of 'super-tab'.
    1. If 'super-tab' is an Angular component and it has 'tabRoot' input, then verify that it is part of this module.
    2. If 'super-tab' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
    3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("s height="100%">
        <super-tab [tabRoot]="tab1Root" title="Line Chart"></super-tab>
        <super-tab [ERROR ->][tabRoot]="tab2Root" title="Bar Chart"></super-tab>
        <super-tab [tabRoot]="tab3Root" title="Pie Ch"): ng:///AppModule/TabsPage.html@2:15
    Can't bind to 'tabRoot' since it isn't a known property of 'super-tab'.
    1. If 'super-tab' is an Angular component and it has 'tabRoot' input, then verify that it is part of this module.
    2. If 'super-tab' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
    3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("art"></super-tab>
        <super-tab [tabRoot]="tab2Root" title="Bar Chart"></super-tab>
        <super-tab [ERROR ->][tabRoot]="tab3Root" title="Pie Chart"></super-tab>
    </super-tabs>
    "): ng:///AppModule/TabsPage.html@3:15 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:
    Can't bind to 'tabRoot' since it isn't a known property of 'super-tab'.
    1. If 'super-tab' is an Angular component and it has 'tabRoot' input, then verify that it is part of this module.
    2. If 'super-tab' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
    3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("<super-tabs height="100%">
        <super-tab [ERROR ->][tabRoot]="tab1Root" title="Line Chart"></super-tab>
        <super-tab [tabRoot]="tab2Root" title="Bar C"): ng:///AppModule/TabsPage.html@1:15
    Can't bind to 'tabRoot' since it isn't a known property of 'super-tab'.
    1. If 'super-tab' is an Angular component and it has 'tabRoot' input, then verify that it is part of this module.
    2. If 'super-tab' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
    3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("s height="100%">
        <super-tab [tabRoot]="tab1Root" title="Line Chart"></super-tab>
        <super-tab [ERROR ->][tabRoot]="tab2Root" title="Bar Chart"></super-tab>
        <super-tab [tabRoot]="tab3Root" title="Pie Ch"): ng:///AppModule/TabsPage.html@2:15
    Can't bind to 'tabRoot' since it isn't a known property of 'super-tab'.
    1. If 'super-tab' is an Angular component and it has 'tabRoot' input, then verify that it is part of this module.
    2. If 'super-tab' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
    3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("art"></super-tab>
        <super-tab [tabRoot]="tab2Root" title="Bar Chart"></super-tab>
        <super-tab [ERROR ->][tabRoot]="tab3Root" title="Pie Chart"></super-tab>
    </super-tabs>
    "): ng:///AppModule/TabsPage.html@3:15
        at syntaxError (http://localhost:8100/build/vendor.js:34999:34)
        at TemplateParser.parse (http://localhost:8100/build/vendor.js:45490:19)
        at JitCompiler._compileTemplate (http://localhost:8100/build/vendor.js:59241:39)
        at http://localhost:8100/build/vendor.js:59165:62
        at Set.forEach (native)
        at JitCompiler._compileComponents (http://localhost:8100/build/vendor.js:59165:19)
        at createResult (http://localhost:8100/build/vendor.js:59050:19)
        at t.invoke (http://localhost:8100/build/polyfills.js:3:8971)
        at r.run (http://localhost:8100/build/polyfills.js:3:4140)
        at http://localhost:8100/build/polyfills.js:3:13731 Error: Template parse errors:
    Can't bind to 'tabRoot' since it isn't a known property of 'super-tab'.
    1. If 'super-tab' is an Angular component and it has 'tabRoot' input, then verify that it is part of this module.
    2. If 'super-tab' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
    3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("<super-tabs height="100%">
        <super-tab [ERROR ->][tabRoot]="tab1Root" title="Line Chart"></super-tab>
        <super-tab [tabRoot]="tab2Root" title="Bar C"): ng:///AppModule/TabsPage.html@1:15
    Can't bind to 'tabRoot' since it isn't a known property of 'super-tab'.
    1. If 'super-tab' is an Angular component and it has 'tabRoot' input, then verify that it is part of this module.
    2. If 'super-tab' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
    3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("s height="100%">
        <super-tab [tabRoot]="tab1Root" title="Line Chart"></super-tab>
        <super-tab [ERROR ->][tabRoot]="tab2Root" title="Bar Chart"></super-tab>
        <super-tab [tabRoot]="tab3Root" title="Pie Ch"): ng:///AppModule/TabsPage.html@2:15
    Can't bind to 'tabRoot' since it isn't a known property of 'super-tab'.
    1. If 'super-tab' is an Angular component and it has 'tabRoot' input, then verify that it is part of this module.
    2. If 'super-tab' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
    3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("art"></super-tab>
        <super-tab [tabRoot]="tab2Root" title="Bar Chart"></super-tab>
        <super-tab [ERROR ->][tabRoot]="tab3Root" title="Pie Chart"></super-tab>
    </super-tabs>
    "): ng:///AppModule/TabsPage.html@3:15
        at syntaxError (http://localhost:8100/build/vendor.js:34999:34)
        at TemplateParser.parse (http://localhost:8100/build/vendor.js:45490:19)
        at JitCompiler._compileTemplate (http://localhost:8100/build/vendor.js:59241:39)
        at http://localhost:8100/build/vendor.js:59165:62
        at Set.forEach (native)
        at JitCompiler._compileComponents (http://localhost:8100/build/vendor.js:59165:19)
        at createResult (http://localhost:8100/build/vendor.js:59050:19)
        at t.invoke (http://localhost:8100/build/polyfills.js:3:8971)
        at r.run (http://localhost:8100/build/polyfills.js:3:4140)
        at http://localhost:8100/build/polyfills.js:3:13731

我的配置：

  
      
  • @ ionic / cli-utils：1.4.0
    •   
  • Ionic CLI：3.4.0
    •   
  • @ ionic / app-scripts：2.0.0
    •   
  • @ ionic / cli-plugin-ionic-angular：1.3.1
    •   
  • 离子骨架：离子角3.5.0
    •   
  • 节点：v7.10.0
    •   
  • OS：OS X El Capitan
    •   
  • Xcode：未安装
    •   
  • ios-deploy：未安装
    •   
  • ios-sim：未安装
    •   
  • npm：5.1.0
    •   

任何可以帮助我的人？​​

2 个答案:

答案 0 :(得分：0)

我只是尝试了代码，但它确实有效。

我采取的步骤：

我的配置：

  • Ionic CLI 3.4.0
  • ionic2-super-tabs ^ 1.1.1
  • @ ionic / app-scripts：1.3.0，
  • @ ionic / cli-plugin-ionic-angular：1.3.2

我将尝试使用您的配置。

¿你能运行这个例子吗？

答案 1 :(得分：0)

我解决了错误。

在https://github.com/zyra/ionic2-super-tabs/自述文件中说：

＆＃34;由于此模块的设计方式，该模块的某些版本可能无法与Ionic Framework的所有版本一起使用。请参阅下表以使用适当的版本。此外，更高版本中的某些功能可能在此模块的旧版本中不可用。此页面仅包含最新文档。对于较旧的文档，请使用Github查找以前版本的README.md文件。

  • 离子框架版本ionic2-super-tabs版本
  • 3.5.x 3.0.0
  • 3.4.x 2.6.3
  • 3.0.0 3.3.x
  • 2.0.0 2.6.3
  • 2.x.x 1.x.x. ＆＃34;

步骤：

  1. 更新package.json中的dependecies 
    2.  "ionic-angular": "3.5.0",
 "ionic2-super-tabs": "3.0.0"
    1. 修改home.html 
      2. <super-tabs id="mainTabs" selectedTabIndex="0" toolbarColor="light" toolbarBackground="dark" indicatorColor="light"
           

      badgeColor =＆＃34;光＆＃34; [config] =＆＃34; {sideMenu：＆＃39; left＆＃39; }＆＃34;   （tabSelect）=＆＃34; onTabSelect（$事件）＆＃34;＆GT;                                  

      1. 修改home.ts
        2.   

        从@ angular / core＆＃39;;

        导入{Component} 
        import { BarChartPage } from '../bar-chart/bar-chart';
import { PieChartPage } from '../pie-chart/pie-chart';
import { LineChartPage } from '../line-chart/line-chart';

import { SuperTabsController } from 'ionic2-super-tabs';

@Component({
  templateUrl: 'home.html',
  providers: [SuperTabsController]
})
export class HomePage {

  tab1Root: any = LineChartPage;
  tab2Root: any = BarChartPage;
  tab3Root: any = PieChartPage;

  constructor(private superTabsCtrl: SuperTabsController) {

  }

  /*
  ngAfterViewInit() {

    // must wait for AfterViewInit if you want to modify the tabs instantly
    this.superTabsCtrl.setBadge('firstPage', 5);

  }
  */

  hideToolbar() {
    this.superTabsCtrl.showToolbar(false);
  }

  showToolbar() {
    this.superTabsCtrl.showToolbar(true);
  }

  onTabSelect(ev: any) {
    console.log('Tab selected', 'Index: ' + ev.index, 'Unique ID: ' + ev.id);
  }

}

        我的package.json 

        > ...
> 
>  "dependencies": {
>     "@angular/common": "4.1.3",
>     "@angular/compiler": "4.1.3",
>     "@angular/compiler-cli": "4.1.3",
>     "@angular/core": "4.1.3",
>     "@angular/forms": "4.1.3",
>     "@angular/http": "4.1.3",
>     "@angular/platform-browser": "4.1.3",
>     "@angular/platform-browser-dynamic": "4.1.3",
>     "@ionic-native/core": "3.12.1",
>     "@ionic-native/splash-screen": "3.12.1",
>     "@ionic-native/status-bar": "3.12.1",
>     "@ionic/storage": "2.0.1",
>     "d3": "^4.8.0",
>     "ionic-angular": "3.5.0",
>     "ionic2-super-tabs": "3.0.0",
>     "ionicons": "3.0.0",
>     "rxjs": "5.4.0",
>     "sw-toolbox": "3.6.0",
>     "zone.js": "0.8.12"   },   "devDependencies": {
>     "@ionic/app-scripts": "2.0.1",
>     "@ionic/cli-plugin-ionic-angular": "1.3.2",
>     "@types/d3": "4.7.0",
>     "typescript": "2.3.4"   },
> 
> ...
相关问题
最新问题