Angular2表达式无法渲染 [英] Angular2 expressions not rendering

问题描述

我无法在Angular2中渲染表达式.

I'm having trouble getting expressions to render in Angular2.

例如，我有类似以下示例的内容，但是{{profile.name}}不呈现任何内容.

For instance, I have something like the example below, but the {{profile.name}} renders nothing.

但是，这不仅是在访问组件实例上的内容时.无论我在表达式中输入什么内容，它都不会呈现(例如{{1 + 2}}).奇怪的是，它删除了表达式所包含的DOM元素的所有内容.

However it's not just when accessing something off the component instance. No matter what I put in the expression, it won't render (e.g. {{1 + 2}}). And what's weirder, it deletes all the content of the DOM element the expression is contained in.

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'
    }
  }
}

不确定我缺少什么.任何帮助将不胜感激！

Not sure what I'm missing. Any help would be much appreciated!

编辑

因此，我做了一些进一步的测试，发现该问题仅在我使用<router-outlet>时发生.所以我有一个类似这样的东西(对代码量表示歉意)

So I have done some further testing, and have found the issue only occurs when I am using <router-outlet>. So I have something that looks like this (apologies for the amount of code)

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) {}
}

home.ts

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

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

推荐答案

我遇到了类似的问题.我的Angular2库定义顺序错误.

I had similar problem. I had my Angular2 libraries defined in wrong order.

按此顺序定义库有助于:

Defining libraries in this order helped:

<!-- 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>
...

system-polyfills的位置似乎很重要！

Place of the system-polyfills seems to be important!

这篇关于Angular2表达式无法渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！