问题描述
更新
答
我刚刚发现了什么事。我要加载脚本 pollyfills
在 systemjs
。那么,这是路由器的一个已知问题:
的毗连/加载顺序
'node_modules / systemjs /距离/ system.src.js',
node_modules / angular2 /包/ angular2-polyfills.js
问题
我想用我自己的组件库,在我的应用程序。
我把组件之后页面下路由器内部
组件,该组件的标题
饰以 @input
显示不出来:
我需要它呈现标题
在页面内属性。
PS:
-
我看到这个之一,但它不适合在我的情况。
-
@input:
依赖
{
angular2:2.0.0-beta.7
systemjs:0.19.22,
ES6-承诺:^ 3.0.2
ES6-垫片:^ 0.33.3
反映了元数据:0.1.2
rxjs:5.0.0-beta.2
zone.js:0.5.15
}
组件
进口{分量,输入}从'angular2 /核心;@零件({
选择:测试,
模板:`
OK MAN PLZ工作
{{标题}}
`
})
出口类测试{
@input()标题:字符串;
}
容器
进口{}组件从angular2 /核心;从进口{}测试./test@零件({
选择:容器,
指令:[测试]
模板:`
<试验标题=测试>< /试验>
`
})
出口类容器{}
启动
进口{}组件从angular2 /核心;
从angular2 /平台/浏览器的进口{}引导;
进口{RouteConfig,ROUTER_DIRECTIVES,ROUTER_PROVIDERS}从'angular2 /路由器;进口集装箱{}的'./container;@零件({
选择:应用程序,
指令:[ROUTER_DIRECTIVES]
模板:`
<路由器出口>< /路由器出口>
`
})
@RouteConfig([
{路径:'/',组件:容器,名称:'集装箱'}
])
类AppComponent {}
引导(AppComponent,ROUTER_PROVIDERS);
这对我的作品。我在标题
输入收到的测试值。请参阅本plunkr:。
什么是预期的行为,你希望那的{{title}}
显示测试
?
Updated
Answer
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'
Problem
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:
I need it renders the title
properties inside the page.
PS:
Dependencies
{
"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"
}
Component
import {Component, Input} from 'angular2/core';
@Component({
selector: 'test',
template: `
OK MAN PLZ WORK
{{title}}
`
})
export class Test {
@Input() title: string;
}
Container
import {Component} from 'angular2/core';
import {Test} from './test'
@Component({
selector: 'container',
directives: [Test],
template: `
<test title="test"></test>
`
})
export class Container {
}
Boot
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);
This works for me. I received the test value in the title
input. See this plunkr: https://plnkr.co/edit/dZSMbVnvoNRXSbiNFbQX?p=preview.
What is the expected behavior, you want that {{title}}
displays "test"
?
这篇关于@input约束力不工作时,我把它放在路由器组件下的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!