Angular - 是否可以创建AppComponent的弹出窗口？

Posted 2021-04-15

只是好奇。 1.在Angular 6中，是否可以在另一个组件中创建AppComponent的弹出窗口？我认为这很有可能。

2. 那么，是否可以将单个组件作为弹出组件和常规组件？因为需要在构造函数中添加将此组件声明为弹出组件

构造函数（private dialogRef：MatDialogRef）{}这样的东西

答案

是的，这是可能的。您可以创建一个组件，然后在您的应用程序中的任何位置使用该组件。

将其显示为弹出窗口的一个选项是调用一个模态，该模式加载该组件作为其内容。

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" data-backdrop="static" aria-hidden="true">
    <app-myComponent></app-myComponent>
</div>

然后从像按钮这样的东西调用模态你可以使用一个函数：

showMyModal() {
    $('#myModal').modal();
}

要将其显示为常规组件，您可以像将任何其他组件放在页面上一样使用它。例如：

<div class="main-panel">
    <app-navbar></app-navbar>
    <router-outlet></router-outlet>
    <app-myComponent></app-myComponent>
    <app-footer></app-footer>
</div>

我推荐https://angular.io/tutorial的Angular教程

它非常简短，真正帮助您了解组件的工作原理以及如何使用它们。

希望这可以帮助！