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

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 的方法。

托德·莫托在这里有一篇很好的文章： 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>