Angular - возможно ли создать всплывающее окно AppComponent?

Question

Просто любопытно.1. В Angular 6, возможно ли создать всплывающее окно AppComponent в другом компоненте?Я думаю, что это вполне возможно.

Тогда, возможно ли иметь один компонент как всплывающий компонент, так и обычный компонент?Потому что потребуется добавить в конструктор объявление этого компонента как всплывающего компонента

конструктор (private dialogRef: MatDialogRef) {} Что-то вроде этого

Answer 1

Да, это возможно.Вы можете создать компонент, а затем использовать его в любом месте приложения.

Один из вариантов отображения его в виде всплывающего окна - вызвать модальный модуль, который загружает этот компонент в качестве его содержимого.

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

Затем, чтобы вызвать модал из чего-то похожего на кнопку, вы можете использовать функцию:

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

Чтобы отобразить его как обычный компонент, вы можете использовать его так же, как любой другой компонент при размещении их настраница.EG:

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

Я рекомендую учебник по Angular по адресу https://angular.io/tutorial

Он очень короткий и действительно помогает понять, как работают компоненты и как их использовать.

Надеюсь, это поможет!