Как определить маршруты для второго корневого компонента в проекте Angular 6 Cli
Может кто-нибудь сказать, как я могу отдельно определить маршруты для нескольких root components в проекте Angular6 + angular-cli?
В настоящее время у меня есть два корневых компонента AppComponent и LoginComponent, и я делаю это, чтобы загрузить их:
index.html
<body>
<app-root></app-root>
<app-login></app-login>
</body>
app.module.ts
@NgModule({
...
bootstrap: [AppComponent, LoginComponent]
})
У меня два вопроса:
- Как я могу определить маршруты для второго корневого компонента
- Как я могу дополнительно загрузить любой корневой компонент в зависимости от маршрутов?
Пример: если я перейду к /login или /login/conf1, должен быть загружен только LoginComponent. Для других маршрутов AppComponent
Удивительно, но в Интернете нет руководств о множественных корневых компонентах, или, по крайней мере, я не смог их найти.
Мой вариант использования двух компонентов: Ссылка на сайт
Ответы 2
вы должны оставить AppComponent как есть и создать другой компонент для работы с маршрутами
у вас должны быть AppComponent, LoginComponent и AnotherOneComponent
в app.module.ts
@ngModule({
imports: [
RouterModule.forRoot(routes)
]
})
export const routes: Routes = [
{
path: 'login',
component: LoginComponent
},
{
path: '**',
component: AnotherOneComponent
}
];
в app.component.html
<router-outlet></router-outlet>
если вы хотите справиться с чем-то вроде
/login/conf1
вам нужно будет определить дочерние маршруты
Если вам нужны дочерние маршруты для маршрута, вы можете сделать следующее:
export const routes: Routes = [ { path: 'login', component: LoginComponent, children: [ { path: 'one', component: SomeComponent}, { path: 'two', component: SomeOtherComponent } ] } ];Если вы хотите динамически загружать компонент на основе маршрута, вы можете вставить модуль Router в файл
app.component.ts.
constructor(private router: Router){}
а затем в html:
`
<app-login *ngIf = "router.url != '/login' ></app-login>
`
Спасибо, но это не ответ на вопрос. Я пытаюсь получить root-компонент. Как AppComponent 1 и AppComponent