如何在 Angular 子组件选择器之间传递内容

Posted 2023-02-23

【中文标题】如何在 Angular 子组件选择器之间传递内容

【英文标题】：How to pass content in between Angular child component selectors

【发布时间】：2019-07-21 00:05:30

【问题描述】：

我正在尝试在 Angular 组件选择器中传递数据，就像它在 Angular 材料或 MD Bootstrap 中完成一样。下面是一个简单的 Angular 材料卡示例，它显示卡中包含的选择器之间的内容。

<mat-card>Simple card</mat-card>

输出将是这样的image

我试图通过声明一个带有容器的子组件来复制相同的内容，并且内容应该放在子组件选择器之间。

child.component.html

<div class=container></div>

child.component.ts

@Component(
selector: 'app-container',
templateUrl: './container.component.html',
styleUrls: ['./container.component.css']
 )

parent.component.html

<app-container> I am inside the container </app-container>

这不像材料卡那样工作，当它被组件选择器包围时，不会显示任何文本。

【参考方案1】：

您应该使用ng-content 来使用角度内容投影。如下使用：

<div class=container>
  <ng-content></ng-content>
</div>

如果要传递多个内容，可以使用ng-content 中的select 属性通过标签名、类名或id 名选择特定元素。

app.component.html

<app-container> 
  <header>Welcome</header>
  <p class="message">Hi, how are you</p>
  <footer>Copyright</footer>
</app-container>

parent.component.html

<div class=container>
  <header>
   <ng-content select="header"></ng-content>
  </header>
  <section>
    <ng-content select="p.message"></ng-content>
  <section>
  <footer>
     <ng-content select="footer"></ng-content>
  </footer>
</div>