Question

我开始使用Angular Tour of Heroes Tutorial学习Angular 2。然后我将教程的结果文件与使用Angular cli 1.0.0-beta.10创建的新项目合并。在进行一些自定义后，我可以使用ng serve启动应用程序并在视图之间导航但视图为空。在我执行其他操作（如单击链接）之前，子组件的数据不会显示在视图中。因此，可以通过双击链接来显示视图。此外，视图似乎无法识别对数据所做的更改。我认为这不是代码中的问题，因为相同的代码在没有cli的情况下工作正常。角度cli使用的库是否有问题？

的package.json

{
"name": "my-project",
"version": "0.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
  "start": "ng serve",
  "postinstall": "typings install",
  "lint": "tslint \"src/**/*.ts\"",
  "test": "ng test",
  "pree2e": "webdriver-manager update",
  "e2e": "protractor"
},
"private": true,
"dependencies": {
  "@angular/common": "2.0.0-rc.5",
  "@angular/compiler": "2.0.0-rc.5",
  "@angular/core": "2.0.0-rc.5",
  "@angular/forms": "0.3.0",
  "@angular/http": "2.0.0-rc.5",
  "@angular/platform-browser": "2.0.0-rc.5",
  "@angular/platform-browser-dynamic": "2.0.0-rc.5",
  "@angular/router": "3.0.0-rc.1",
  "@angular/router-deprecated": "2.0.0-rc.2",
  "@angular/upgrade": "2.0.0-rc.5",
  "systemjs": "0.19.27",
  "core-js": "^2.4.0",
  "reflect-metadata": "^0.1.3",
  "rxjs": "5.0.0-beta.6",
  "zone.js": "^0.6.12",
  "angular2-in-memory-web-api": "0.0.15"
},
"devDependencies": {
  "@angular/compiler-cli": "^0.4.1",
  "angular-cli": "1.0.0-beta.10",
  "codelyzer": "0.0.20",
  "ember-cli-inject-live-reload": "1.4.0",
  "jasmine-core": "2.4.1",
  "jasmine-spec-reporter": "2.5.0",
  "karma": "^1.1.1",
  "karma-chrome-launcher": "^1.0.1",
  "karma-jasmine": "^1.0.2",
  "protractor": "^3.3.0",
  "ts-node": "^0.5.5",
  "tslint": "^3.6.0",
  "typescript": "^2.0.0",
  "typings": "^1.3.1"
}
}

请求/仪表板后生成的HTML

<html>
<head>
  <base href="/">
  <meta charset="utf-8">
  <title>Material2App</title>
  <script src="/ember-cli-live-reload.js" type="text/javascript"></script>
  <script type="text/javascript" src="http://localhost:49152/livereload.js?snipver=1"></script>
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="styles.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>
<app-root>
  <div>
    <span>Tour of Heroes</span>
  </div>

  <nav>
    <a md-list-item="" routerlink="/dashboard" routerlinkactive="active" ng-reflect-router-link="/dashboard"
       ng-reflect-router-link-active="active" ng-reflect-href="/dashboard" href="/dashboard"
       class="active">Dashboard</a>
    <a md-list-item="" routerlink="/heroes" routerlinkactive="active" ng-reflect-router-link="/heroes"
       ng-reflect-router-link-active="active" ng-reflect-href="/heroes" href="/heroes">Heroes</a>
  </nav>
  <div class="app-content">
    <router-outlet></router-outlet>
    <my-dashboard><h3>Top Heroes</h3>
      <div class="grid grid-pad">
        <!--template bindings={
      "ng-reflect-ng-for-of": ""
    }-->
      </div>
      <hero-search>
        <div id="search-component">
          <h4>Hero Search</h4>
          <input id="search-box">
          <div>
            <!--template bindings={
      "ng-reflect-ng-for-of": null
    }-->
          </div>
        </div>
      </hero-search>

    </my-dashboard>
  </div>

</app-root>

<script src="vendor/core-js/client/core.js"></script>
<script src="vendor/reflect-metadata/Reflect.js"></script>
<script src="vendor/zone.js/dist/zone.js"></script>
<script src="vendor/systemjs/dist/system-polyfills.js"></script>
<script src="vendor/systemjs/dist/system.src.js"></script>

<script>
  System.import('system-config.js').then(function () {
    System.import('main');
  }).catch(console.error.bind(console));
</script>
</body>
</html>

Angular 2英雄教程+ Angular cli 1.0.0-beta.10

0 个答案: