Angular @输入绑定不'；当我把它放在路由器组件下时，它不工作

已更新

回答

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

我刚刚知道发生了什么事。我必须在

systemjs

之后加载脚本

pollyfills

。这是路由器的一个已知问题：

混凝土/装载顺序

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

---

问题

我正在尝试在我的应用程序中使用我自己的组件库。 在我将组件放在

路由器

组件内的一个页面下后，该组件的

标题

上装饰有

@Input

：

我需要它在页面内呈现

标题

属性

附言：

• 我看到了，但不适合我的情况

• @输入：

依赖关系

{
    "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 {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);

容器

import {Component} from 'angular2/core';

import {Test} from './test'

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

}

从'angular2/core'导入{Component}；
从“./Test”导入{Test}
@组成部分({
选择器：'容器'，
指令：[测试]，
模板：`
`
})
出口类集装箱{
}

开机

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

从'angular2/core'导入{Component}；
从'angular2/platform/browser'导入{bootstrap}；
从'angular2/ROUTER'导入{RouteConfig，ROUTER_指令，ROUTER_提供程序}；
从“./Container”导入{Container}；
@组成部分({
选择器：“应用程序”，
指令：[路由器指令]，
模板：`
`
})
@线路图([
{路径：'/'，组件：容器，名称：'Container'}
])
类AppComponent{}
引导（AppComponent、路由器和U提供程序）；

在代码中，标题是一个属性：

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

你应使用：

---

在代码中，标题是一个属性：

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

你应使用：

---

这对我很有用。我在

标题

输入中收到了测试值。请参阅以下链接：

---

预期的行为是什么，您希望

{{title}

显示

“test”

？

这对我有效。我在

标题

输入中收到了测试值。请参阅以下链接：

---

---

预期的行为是什么，您希望

{{title}}

显示

“test”

？

而不显示

[…]

或

{…}

Angular忽略该属性，它是一个仅由浏览器处理的简单静态DOM属性。您错了，这只是数据绑定的一种方式。让我们看一看。@PeterTang你的问题没有告诉我们预期的行为是什么，所以我们只能猜测。哦，我会更清楚地编辑它，谢谢@GünterZöchbauer@PeterTang尝试一下，如果它的工作与这个建议，这样我们就可以排除其他原因。如果有效，我们可以讨论替代语法“如果您需要它（；没有

[…]

或

{…}”

Angular忽略该属性，它是一个仅由浏览器处理的简单静态DOM属性。你错了，这只是数据绑定的一种方式。让我们看一看。@PeterTang你的问题没有说明预期的行为是什么，所以我们只能猜测。哦，我会更清楚地编辑它，谢谢@GünterZöchbauer@PeterTangTr如果它与此建议一起工作，那么我们可以排除其他原因。如果它工作，我们可以讨论替代语法“如果您需要它（；是的，这就是我想要的。页面显示

加载…

，控制台报告XHR错误：（加载资源失败：服务器响应状态为404（OK））angular2 polyfills.js:138错误：XHR错误（404 OK）加载（…）我认为这是因为您的基本引用；-）你应该在你的

之后立即更新

。如果你分叉了我的plunkr，则id不是正确的id…好吧，我使用了相同的

base

标记，但我没有分叉。url部分plnkr.com/edit/

id

是否与此相同？是的，这是我想要的。页面显示了

加载…

，控制台报告XHR错误：（加载资源失败：服务器响应状态为404（OK）angular2 polyfills.js:138错误：XHR错误（404 OK）加载（…）我认为这是因为您的基本引用；-）你应该在你的

之后立即更新

。如果你分叉了我的plunkr，那么id就不正确了……好吧，我使用了相同的

base

标记，但我没有分叉。url部分plnkr.com/edit/

id

也一样吗？