@input约束力不工作时，我把它放在路由器组件下 [英] @Input binding doesn't work when I put it under a router component

问题描述

更新

答

我刚刚发现了什么事。我要加载脚本 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@零件（{
    选择：容器，
    指令：[测试]
    模板：`
    ＆lt;试验标题=测试＆GT;＆LT; /试验＆gt;
    `
}）
出口类容器{}
 

启动

 进口{}组件从angular2 /核心;
从angular2 /平台/浏览器的进口{}引导;
进口{RouteConfig，ROUTER_DIRECTIVES，ROUTER_PROVIDERS}从'angular2 /路由器;进口集装箱{}的'./container;@零件（{
    选择：应用程序，
    指令：[ROUTER_DIRECTIVES]
    模板：`
        ＆LT;路由器出口＆GT;＆LT; /路由器出口＆GT;
    `
}）
@RouteConfig（[
    {路径：'/'，组件：容器，名称：'集装箱'}
]）
类AppComponent {}
引导（AppComponent，ROUTER_PROVIDERS）;
 

解决方案

这对我的作品。我在标题输入收到的测试值。请参阅本plunkr： https://plnkr.co/edit/dZSMbVnvoNRXSbiNFbQX?p=$p $ PVIEW 。

什么是预期的行为，你希望那的{{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:

• I see this one but it doesn't fit in my case.

• @Input: link

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约束力不工作时，我把它放在路由器组件下的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！