Question

已更新

Answer

我刚刚发现了发生的事情。我必须在pollyfills之后加载脚本systemjs。嗯，这是路由器的一个已知问题：

Concat/Load Order

'node_modules/systemjs/dist/system.src.js',
'node_modules/angular2/bundles/angular2-polyfills.js'

问题

我正在尝试在我的应用中使用自己的组件库。将组件放在router组件内的页面下后，用title修饰的组件@Input不会显示：

我需要它在页面内呈现title属性。

PS：

我看到这个one，但它不符合我的情况。
@Input：link

依赖关系

{
    "angular2": "2.0.0-beta.7",
    "systemjs": "0.19.22",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.2",
    "zone.js": "0.5.15"
}

组件

import {Component, Input} from 'angular2/core';

@Component({
    selector: 'test',
    template: `
            OK MAN PLZ WORK
            {{title}}
    `
})
export class Test {
    @Input() title: string;
}

容器

import {Component} from 'angular2/core';

import {Test} from './test'

@Component({
    selector: 'container',
    directives: [Test],
    template: `
    <test title="test"></test>
    `
})
export class Container {

}

引导

import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';

import {Container} from './container;

@Component({
    selector: 'app',
    directives: [ROUTER_DIRECTIVES],
    template: `
        <router-outlet></router-outlet>
    `
})
@RouteConfig([
    { path: '/', component: Container, name: 'Container'}
])
class AppComponent {}
bootstrap(AppComponent, ROUTER_PROVIDERS);

Answer 1

在您的代码中，title是一个属性：

<test title="test"></test>

您应该使用property binding：

<test [title]="test"></test>

Answer 2

这对我有用。我在title输入中收到了测试值。请参阅此plunkr：https://plnkr.co/edit/dZSMbVnvoNRXSbiNFbQX?p=preview。

您希望{{title}}显示"test"？

的预期行为是什么

当我把它放在路由器组件下时，@ Input绑定不起作用

2 个答案: