Question

我正在使用 angular2-universal-starter 项目。

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

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

以下是我的代码段：

app.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" };
  }  
}

heading.component.ts

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";
    }    
}

Answer 1

我猜你只需要在价值尚不可用时让你的代码更宽容。

这将有效：

typedef union
{
  uint8_t longByteTable[16][256][16]
  uint64_t reinterpretedTable[16][256][2];
} table_t;

const table_t table;

Elvis或安全导航操作员仅在{{user?.name}}

时评估.name

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

user != null

数据绑定不适用于angular2-universal-starter中的动态组件加载器

1 个答案: