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>

答

添加指令象下面固定它：

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

Angular2其具有具有另一个Angular2组件不工作

相关推荐