Angular2 有一个 WinJS 组件，另一个 Angular2 组件不工作

Question

正如您在以下代码中注意到的，dashboard.cshtml 有一个名为 dashboard 的 angular2 组件-应用。 dashboard-app 有一个来自 dashboard.html 的 winjs 拆分器控件。此控件有另一个 contentara angular2 组件。

当我运行以下内容时，我在控制台中没有看到任何错误。但是我没有看到呈现的 contentarea。

我的期望是在内容区看到测试。我假设 bootstrap(MyAppComponent);（来自 app.js）应该连接整个应用程序，所以我应该请参阅来自 contentarea 组件的内容区域中的 Testing。

来自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>

Answer 1

添加指令如下修复它：

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

Angular2 有一个 WinJS 组件，另一个 Angular2 组件不工作

Angular2 which has a WinJS component which has another Angular2 component not working

winjs

angularjs