Question

假设有一个组件ButtonComponent和SideComponent。如何将“ ButtonComponent”作为属性传递给“ SideComponent”？

例如，

@Component({
  selector: 'my-btn',
  template: '<span>My button</span>'
})
export class ButtonComponent implements OnInit {

} 


@Component({
  selector: 'my-side',
  template: '<div><div class="btn-section">{{myBtn}}</div><div class="content-section"><ng-content></ng-content></div></div>'
})
export class SideComponent implements OnInit {
   @Input() myBtn:any = null;
}

Usage:
<my-side [myBtn]="btnTmpl">
  Hello, this is my content
</my-side>
<my-btn #btnTmpl></my-btn>

但这不起作用，最终模板将[Object Object]显示为输出。

Answer 1

执行此操作的一种方法是使用ng-content。 ng-content是一种在组件中显示动态HTML的方法。

Todd Motto在这里写得很好： https://toddmotto.com/transclusion-in-angular-2-with-ng-content

因此您的代码应如下所示：

@Component({
  selector: 'my-btn',
  template: '<span>My button</span>'
})
export class ButtonComponent implements OnInit {

} 


@Component({
  selector: 'my-side',
  template: '<div><ng-content></ng-content></div>'
})
export class SideComponent implements OnInit {
}

用法如下：

<my-side>
  <my-btn></my-btn>
</my-side>

Answer 2

使用ng-template

app.component.html

<my-side>
  <ng-template>
      <my-btn></my-btn> 
  </ng-template>
</my-side>

ts

  @ContentChild(TemplateRef) template:TemplateRef<any>;
  constructor() { }
  ngAfterViewInit() {
    console.log(this.template);
  }

示例：https://stackblitz.com/edit/child-parent

将外部组件作为属性传递给Angular2 +

2 个答案: