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

Question

Just curious. 1. In Angular 6, Is it possible to create a pop up of the AppComponent in another component? I think it is quite possible.

2. Then, Is it possible to have a single component as both a Popup Component and a Regular component ? Because there will be a need to add in the constructor declaring this component as a pop up component

constructor(private dialogRef: MatDialogRef){} Something like this

Answer 1

Yes this is possible. You can create a component and then use that component wherever you want in your application.

One option to display it as a popup would be to call a modal which loads that component as it's content.

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

Then to call the modal from something like a button you can use a function:

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

To display it as a regular component you can use it as you would any other component when placing these on a page. EG:

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

I recommend the Angular tutorial at https://angular.io/tutorial

It is very short and really helps you understand how components work and how to use them.

Hope this helps!