Ng-container Angular

在本节中，我们将学习 Ng-containers。我们可以在我们的应用程序中使用任何版本的 Angular，例如 Angular 6、7、8 以及 ng-content 中的 Angular 8。这里，我们将把 ng-content 与 ng-container 一起使用。

通过使用 ng-container 和 ng-content，我们可以为可重用组件提供另一个解决方案。在我们的 Angular 应用程序中，我们可以通过使用 ng-container 和 ng-content 轻松创建一个可重用组件。在我们的组件中，我们可以轻松地动态传递数据。

在下面的示例中，将创建一个 my-card 组件。为了创建它，ng-content 将与 ng-container 一起使用。在我们的示例中，还可以使用 id 和 dom 元素。我们还将使用 Bootstrap 4。我们将把 Bootstrap 4 与内容、标题和页脚文本一起使用。我们可以动态传递这些参数，并在 Angular 应用程序中的任何位置调用我们的组件。为了创建带有 ng-content 的 ng-container，步骤如下：

步骤 1

在此步骤中，我们将创建新的应用程序。将使用以下命令创建我们的新 Angular 应用程序，如下所示：

ng new appNgContent

步骤 2

在此步骤中，我们将创建新组件。为此，将创建一个名为 my-card 的新组件。在这里，我们还将使用 Bootstrap 卡片。我们将使用视图文件并像这样更新它：

ng g component my-card

现在我们将使用一个名为 my-card.components.ts 的文件，并像这样更新它的代码：

src/app/my-card/my-card.component.ts

这里，将使用 Bootstrap 4 的卡片布局。如果我们的系统没有 Bootstrap，我们可以使用以下链接将其安装到我们的系统中：

angular-7-with-bootstrap

现在我们将使用我们的 HTML 视图文件并像这样更新它：

src/app/my-card/my-card.component.html

步骤 3

在此步骤中，我们将使用组件。在这里，我们将使用动态数据并像这样调用我们的组件：

src/app/app.component.html

现在我们上面的代码已经准备好运行了。为了运行上面的代码，我们将使用以下命令

当我们运行此命令时，将生成以下输出