компонент показывает перед его вызовом ,как это исправить

#angular

Вопрос:

У меня есть компонент, который имеет модальный. Мой основной компонент app.component.html и это имя компонента app-compeleted-component ,поэтому в маршрутизации, если вы просматриваете http://localhost:4200/ он покажет мою app.component.html домашнюю страницу. Если вы просматриваете http://localhost:4200/app-compeleted-component он должен показывать страницу с модальным в ней. Я отправляю некоторую информацию в этот модальный компонент из основного.

Так что внутри меня app.html.component у меня есть:

 lt;app-compeleted-component [childMessage]="parentMessage"gt;lt;/app-compeleted-componentgt;  

Так как он находится внутри моего app.component.html , он отображается до того, как будет указан его URL-адрес. Я хочу, чтобы это было показано, как только это http://localhost:4200/app-compeleted-component это удар ,как я могу это сделать? Я новичок в angular. Честно говоря, я не мог найти для этого способа. Любая помощь будет признательна

Ответ №1:

Не размещайте нигде сгнившие компоненты. Маршрутизация отвечает за их отображение. Единственное, что вам нужно добавить внутри app.component.html есть lt;router-outletgt; .

Также app.component.html не может быть вашей домашней страницей, так как это корневой каталог маршрутизации. Создайте home.component и добавьте следующую настройку маршрутизации:

 routes: Route[] = [  { path: '', pathMatch: 'full', component: HomeComponent },  { path: 'completed', component: CompletedComponent }  

Таким образом, навигация /competed будет скрывать компонент home и показывать модальный.

Комментарии:

1. Я уже все положил в свой app.component.html и т. д.,если я создам новый компонент и помещу их все туда,будет ли он работать?я имею в виду, что просто нужно выполнить вставку?