Object 数据绑定无法与angular2 universal starter中的动态组件加载程序一起工作

我正在使用angular2 universal starter项目

因此，我试图使用@Input将对象传递给子组件，但它无法正常工作

我已经使用动态组件加载器来加载子组件，我想将对象传递给子组件

以下是我的代码片段：

应用程序组件.ts

import {Component, Directive, Renderer, DynamicComponentLoader, ElementRef} from 'angular2/core';
import {Http} from 'angular2/http';    
import {headingComponent} from './heading.component';
@Directive({
  selector: '[x-large]'
})
export class XLarge {
  constructor(element: ElementRef, renderer: Renderer) {
    // we must interact with the dom through Renderer for webworker/server to see the changes
    renderer.setElementStyle(element.nativeElement, 'fontSize', 'x-large');
  }
}
@Component({
  selector: 'app',
  directives: [    
    XLarge
  ],  
  template: `
    <div>
        <div>
        <span x-large>Hello, {{ user.name }}!</span>
        </div>
        <icici-heading [user]="user"></icici-heading>      
    </div>
`
})
export class App {
  public user;       
  constructor(dcl: DynamicComponentLoader, elementRef: ElementRef) {          
      dcl.loadNextToLocation(headingComponent, elementRef);
  }
  ngOnInit(){
      this.user = { "id": 11, "name": "Mr. Nice" };
  }  
}

import {Component, OnInit,Input} from 'angular2/core';

@Component({
    selector: 'icici-heading',
    template: `
        <div>
        <!--{{user.name}}-->this is not working
        {{name}}
       </div>
`   
 })

export class headingComponent implements OnInit {
    @Input() user;
    name: string;
    constructor() { }
    ngOnInit() { 
        this.name="heading is rendered";
    }    
}

从'angular2/core'导入{Component，Directive，Renderer，DynamicComponentLoader，ElementRef}；
从'angular2/Http'导入{Http}；
从“./heading.component”导入{headingComponent}；
@指示({
选择器：“[x-large]”
})
出口类别XLarge{
构造函数（元素：ElementRef，呈现器：呈现器）{
//我们必须通过渲染器与dom交互，以便webworker/server查看更改
renderer.setElementStyle（element.nativeElement，'fontSize'，'x-large'）；
}
}
@组成部分({
选择器：“应用程序”，
指令：[
XLarge
],  
模板：`
你好，{{user.name}}！
`
})
导出类应用程序{
公共用户；
构造函数（dcl:DynamicComponentLoader，elementRef:elementRef）{
dcl.下一个装载位置（首件组件，elementRef）；
}
恩戈尼尼特（）{
this.user={“id”：11，“name”：“Mr.Nice”}；
}  
}

标题.component.ts

import {Component, Directive, Renderer, DynamicComponentLoader, ElementRef} from 'angular2/core';
import {Http} from 'angular2/http';    
import {headingComponent} from './heading.component';
@Directive({
  selector: '[x-large]'
})
export class XLarge {
  constructor(element: ElementRef, renderer: Renderer) {
    // we must interact with the dom through Renderer for webworker/server to see the changes
    renderer.setElementStyle(element.nativeElement, 'fontSize', 'x-large');
  }
}
@Component({
  selector: 'app',
  directives: [    
    XLarge
  ],  
  template: `
    <div>
        <div>
        <span x-large>Hello, {{ user.name }}!</span>
        </div>
        <icici-heading [user]="user"></icici-heading>      
    </div>
`
})
export class App {
  public user;       
  constructor(dcl: DynamicComponentLoader, elementRef: ElementRef) {          
      dcl.loadNextToLocation(headingComponent, elementRef);
  }
  ngOnInit(){
      this.user = { "id": 11, "name": "Mr. Nice" };
  }  
}

import {Component, OnInit,Input} from 'angular2/core';

@Component({
    selector: 'icici-heading',
    template: `
        <div>
        <!--{{user.name}}-->this is not working
        {{name}}
       </div>
`   
 })

export class headingComponent implements OnInit {
    @Input() user;
    name: string;
    constructor() { }
    ngOnInit() { 
        this.name="heading is rendered";
    }    
}

import{Component，OnInit，Input}来自'angular2/core'；
@组成部分({
选择器：“icici标题”，
模板：`
这不起作用
{{name}}
`   
})
导出类headingComponent实现OnInit{
@输入（）用户；
名称：字符串；
构造函数（）{}
ngOnInit（）{
this.name=“标题已呈现”；
}    
}

我想，当值还不可用时，您只需要让代码更加宽容

这将有助于：

{{user?.name}}

当

用户！=空

对于动态添加的组件，还需要强制传递值

dcl.loadNextToLocation(headingComponent, elementRef)
.then(cmpRef => cmpRef.instance.user = this.user);

---

这个标题有误导性。依赖项注入是关于为构造函数参数传递什么。您的问题是关于数据绑定的。@GünterZöchbauer-suger请为此获取合适的标题您是否在浏览器控制台中收到错误消息？@GünterZöchbauer否。这是因为我将其用于服务器端渲染，所以控制台中不会显示MSG。我也不明白您为什么要将

添加到模板中，并使用

DynamicComponentLoader

。你到底希望发生什么？不支持数据绑定到DCL添加的组件的输入。