Question

我试图像在Angular材质或MD Bootstrap中一样在Angular组件选择器中传递数据。下面是一个简单的Angular Material Card的示例，它显示了Card中选择器之间的内容。

<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>

这不能像“物料”卡那样工作，并且当其被组件选择器包围时，不会显示任何文本。

Answer 1

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

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

如果要传递多个内容，可以使用select中的ng-content属性使用标签名称，类名称或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>

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

1 个答案: