Как вы заметили в следующем коде, dashboard.cshtml имеет компонент angular2 под названием dashboard-app. В панели инструментов есть элемент управления winjs splitter, который поступает из dashboard.html. Этот элемент управления имеет еще один компонент contentara angular2.
Когда я запускаю следующее, я не вижу никаких ошибок в консоли. Но я не вижу, чтобы контент был предоставлен.
Мое ожидание - увидеть Тестирование в области содержимого. Я предполагаю бутстрап (MyAppComponent); (из app.js) должен подключить все приложение, поэтому я должен увидеть Тестирование в области содержимого, которая поступает из компонента contentarea.
Выход из Chrome:
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 ]
})