@Input binding doesn't work when I put it under a router component

问题

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

回答1:

In your code, title is an attribute:

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

You should use property binding:

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

回答2:

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"?

来源：https://stackoverflow.com/questions/35601876/input-binding-doesnt-work-when-i-put-it-under-a-router-component

标签

angular

angular2-routing

angular2-template