Question

我有一个小型的入门项目，可以学习Angular2的基础知识，但有一个简单的问题，我确定我必须遗漏一些明显的东西。

我在es6和babel中使用JSPM，ng2 alpha 37，js文件。有一个app容器组件和3个其他骨架组件，我可以成功地路由到并查看相应的html。

在三个组件中的任何一个组件中引入一个简单的字符串属性我似乎无法绑定视图中的值，但是在父容器组件上尝试相同的代码时，相同的代码结构可以正常工作。

子组件示例

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

@Component({ 
    selector: 'self-employed-calculator' 
})
@View({
    templateUrl: 'app/components/self-employed-calculator/self-employed-calculator.html'
})
export class SelfEmployedCalculatorComponent {
    constructor() {
        this.test = 'Boom';
        console.log(this.test);
    }
}

<section class="mui-panel">
    <p>Self-Employed Calculator</p>
    <h3>{{ test }}</h3>
</section>

控制台日志报告的值正确，但渲染的html为

<h3 class="ng-binding"> </h3>

在父组件上使用相同的方法，我得到了我期望的结果

import { Component, View } from 'angular2/angular2';
import { ROUTER_DIRECTIVES, RouteConfig } from 'angular2/router';
import { HomeComponent } from 'app/components/home/home';
import { BudgetPlannerComponent } from 'app/components/budget-planner/budget-planner';
import { SelfEmployedCalculatorComponent } from 'app/components/self-employed-calculator/self-employed-calculator';

@Component({
    selector: 'playground-app'
})
@View({
    templateUrl: 'app/components/playground-app/playground-app.html',
    directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
    { path: '/', redirectTo: '/home' },
  { path: '/home', as: 'home', component: HomeComponent },
    { path: '/budget-planner', as: 'budget-planner', component: BudgetPlannerComponent },
    { path: '/self-employed-calculator', as: 'self-employed-calculator', component: SelfEmployedCalculatorComponent }

])
export class PlaygroundAppComponent {
    constructor() {
        this.title = 'test';
    }
}

<header class="mui-appbar mui-z1" style="margin-bottom:20px">
    <div class="mui-container mui-appbar-line-height">
        <span>
            <a [router-link]="['/home']" class="mui-text-title mui-text-white">Angular 2 Playground</a>
        </span>
        <nav class="mui-text-white mui-pull-right">
            <div class="mui-dropdown">
                <button class="mui-btn" data-mui-color="accent" data-mui-toggle="dropdown">
                    Components
                    <span class="mui-caret"></span>
                </button>
                <ul class="mui-dropdown-menu">
                    <li><a [router-link]="['/self-employed-calculator']">Self-Employed Calculator</a></li>
                    <li><a [router-link]="['/budget-planner']">Budget Planner</a></li>
                </ul>
            </div>
        </nav>
    </div>
</header>
<main class="mui-container">
    <router-outlet></router-outlet>
    <h3>{{ title }}</h3>
    <footer>
        &copy; My Footer
    </footer>
</main>

我看到了预期的结果

<h3 class="ng-binding">test</h3>

Git Source

关于儿童路线的角度2约束问题

0 个答案: