将模板作为参数传递给另一个模板

Question

我正在使用Angular 7 Web应用程序。我有一些组件。其中之一是card.component，该容器应该是其他容器（不是所有容器）的容器。

卡模板正文：

<div id="main-container" class="container">
  <mat-card id="login-card">
    <div id="form-container">
      // here I want to paste another components view as a parameter
    </div>
  </mat-card>
</div>

下一个是login.component。该组件应使用card.component模板作为容器，并将另一个组件的表单作为内容。

我希望它的工作原理像这样（psedocode）：

<app-card [my-html-param]="app-login-form"></app-card>

现在在上面的组件中，我想传递来自login-form.component的视图

如何实现这种功能？

Answer 1

您必须使用<ng-content>，它将使您可以在应用卡中添加一些内容：

<app-card>
    <app-login-form></app-login-form>
</app-card>

然后，在您的 login-form.component.html 中，您可以在{strong> app-card 标记内添加带有<ng-content>的行。