当我将它放在路由器组件下时,@Input 绑定不起作用 [英] @Input binding doesn't work when I put it under a router component
问题描述
更新
答案
我刚刚发现发生了什么.我必须在 systemjs
之后加载脚本 pollyfills
.嗯,这是路由器的一个已知问题:
I've just found out what happened. I have to load the script pollyfills
after systemjs
. Well, this is an known issue of the router:
Concat/Load Order
'node_modules/systemjs/dist/system.src.js',
'node_modules/angular2/bundles/angular2-polyfills.js'
<小时>
问题
我正在尝试在我的应用程序中使用我自己的组件库.将组件放在 router
组件内的页面下后,组件的 title
用 @Input
修饰后不显示:
I am trying to use my own component library in my app.
After I put the component under a page inside a router
component, the component's title
decorated with @Input
doesn't show up:
我需要它在页面内呈现 title
属性.
I need it renders the title
properties inside the page.
附注:
我看到了这个一个,但它不适合就我而言.
I see this one but it doesn't fit in my case.
@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);
推荐答案
这对我有用.我在 title
输入中收到了测试值.请参阅此 plunkr:https://plnkr.co/edit/dZSMbVnvoNRXSbiNFbQX?p=preview.
This works for me. I received the test value in the title
input. See this plunkr: https://plnkr.co/edit/dZSMbVnvoNRXSbiNFbQX?p=preview.
预期的行为是什么,您希望 {{title}}
显示 "test"
?
What is the expected behavior, you want that {{title}}
displays "test"
?
这篇关于当我将它放在路由器组件下时,@Input 绑定不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!