Angular2表达式无法呈现

Chr*_*eff 3 templates expression render typescript angular

我在Angular2中渲染表达式时遇到了麻烦.

例如,我有类似下面的例子,但{{profile.name}}什么都没有.

然而,它不仅仅是在从组件实例访问某些东西时.无论我放在表达式中,它都不会呈现(例如{{1 + 2}}).更奇怪的是,它删除了包含表达式的DOM元素的所有内容.

import { Component, View } from 'angular2/core'

@Component({
  selector: 'my-component'
})
@View({
  template: `
  <div class="user">
    {{profile.name}}
  </div>
  `
})
export class MyComponent {
  profile

  constructor() {
    this.profile = {
      name: 'John Smith'
    }
  }
}
Run Code Online (Sandbox Code Playgroud)

不知道我错过了什么.任何帮助将非常感激!

编辑

所以我做了一些进一步的测试,发现问题只发生在我使用的时候<router-outlet>.所以我有一些看起来像这样的东西(代码量的道歉)

app.ts

import { View, Component } from 'angular2/core'
import { RouteConfig, RouterOutlet } from 'angular2/router'

import { Home } from './home'

@Component({
  selector: 'my-app'
})
@View({
  template: '<router-outlet></router-outlet>',
  directives: [RouterOutlet]
})
@RouteConfig([
  { path: '/', redirectTo: ['/Home'] },
  { path: '/home', as: 'Home', component: Home }
])
export class App {
  constructor(public router: Router) {}
}
Run Code Online (Sandbox Code Playgroud)

home.ts

import { Component, View } from 'angular2/core'

@Component({
  selector: 'home',
})
@View({
  template: '{{name}}'
})
export class Home {
  name:string = 'John Smith'
}
Run Code Online (Sandbox Code Playgroud)

小智 5

我有类似的问题.我的Angular2库定义错误.

按此顺序定义库有助于:

<!-- Keep these first!!! -->
<script src="~/node_modules/es6-shim/es6-shim.js"></script>
<script src="~/node_modules/systemjs/dist/system-polyfills.js"></script>

<script src="~/node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="~/node_modules/systemjs/dist/system.js"></script>
...
Run Code Online (Sandbox Code Playgroud)

系统的位置 - polyfill似乎很重要!