Angular2其具有具有另一個Angular2組件不工作

正如你在下面的代碼注意到WinJS組成部分，dashboard.cshtml有angular2組件調用儀表板應用。 儀表板-app具有winjs分離器控制來自dashboard.html。這個控件還有另一個組件contentaraangular2組件。Angular2其具有具有另一個Angular2組件不工作

當我運行以下內容時，控制檯中看不到任何錯誤。但是我沒有看到呈現的內容區域。

我的期望是在內容區域看到測試。我假設bootstrap（MyAppComponent）;（來自app.js）應該連線整個應用程序，所以我應該在內容區域中看到測試來自contentarea組件。從鉻

輸出：

Dashboard.cshtml

@{ 
    ViewBag.Title = "Dashboard"; 
} 

<div class="container-fluid"> 
    <div class="row"> 
     <dashboard-app></dashboard-app> 
    </div> 
</div> 

<script src="/jspm_packages/system.js"></script> 
<script src="/config.js"></script> 

<script> 
    System.import('reflect-metadata') 
     .then(function() { 
      System.import('angular2') 
       .then(function() { 
        System.import("/js/app"); 
       }); 
     }); 
</script>

App.js

import {Component, View, bootstrap, OnInit} from 'angular2'; 
import 'reflect-metadata'; 
import 'winjs'; 
import '../js/content' 

@Component({ 
    selector: 'dashboard-app' 
}) 
@View({ 
    templateUrl: '../js/dashboard.html' 
}) 
class MyAppComponent implements OnInit { 
    constructor() { 
    } 

    onInit() { 
     WinJS.UI.processAll().done(function() { 
      var splitView = document.querySelector(".splitView").winControl; 
      new WinJS.UI._WinKeyboard(splitView.paneElement); // Temporary workaround: Draw keyboard focus visuals on NavBarCommands 
     }); 
    } 
} 

bootstrap(MyAppComponent);

個

content.js

import {Component, View, bootstrap, OnInit} from 'angular2'; 
import 'reflect-metadata'; 

@Component({ 
    selector: 'contentarea' 
}) 
@View({ 
    template: '<h3>Testing</h3>' 
}) 
class ContentComponent { 
    constructor() { 
    } 
}

dashboard.html

<div id="app"> 
    <div class="splitView" data-win-control="WinJS.UI.SplitView" data-win-options="{ openedDisplayMode : 'inline' }"> 
     <div> 
      <div class="header"> 
       <button class="win-splitviewpanetoggle" 
         data-win-control="WinJS.UI.SplitViewPaneToggle" 
         data-win-options="{ splitView: select('.splitView') }"> 
       </button> 
       <div class="title">SplitView Pane area</div> 
      </div> 
      <div class="nav-commands"> 
       <div data-win-control="WinJS.UI.SplitViewCommand" data-win-options="{ label: 'Home', icon: 'home'}"></div> 
       <div data-win-control="WinJS.UI.SplitViewCommand" data-win-options="{ label: 'Favorite', icon: 'favorite'}"></div> 
       <div data-win-control="WinJS.UI.SplitViewCommand" data-win-options="{ label: 'Settings', icon: 'settings'}"></div> 
      </div> 
     </div> 
     <div class="contenttext"> 
      <contentarea></contentarea> 
     </div> 
    </div> 
</div>

來源

2015-09-28 wonderful world

添加指令象下面固定它：

@Component({ 
    selector: 'dashboard-app' 
}) 
@View({ 
    templateUrl: '../js/dashboard.html' 
    directives: [ ContentComponent ] 
})

來源

2015-09-28 23:54:09

Angular2其具有具有另一個Angular2組件不工作

回答

相關問題