Как использовать несколькос угловым

Question

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

Я пытался найти угловую документацию, но ничего не понял, абсолютно ничего.Последние мысли пришли и задали мой вопрос здесь в переполнении стека.

<div class="row no-gutters">

  <div class="leftside">
    <img src="assets/truck.jpeg">
  </div>

  <div class="rightside">
    <h1 class="title">Route Optimization</h1>
    <br>
    <app-loginbar></app-loginbar>
    <router-outlet></router-outlet>
  </div>

</div>

Логин Забыли пароль

Это в основном моя страница входа/ забыл пароль, как вы можете видеть, у меня есть панель навигации и тег аутлера моего маршрутизатора под ней.

<ul class="nav justify-content-center">
    <li class="nav-item">
        <button class="nav-button-left" (click)="changeSignIn()">
            <h3 class="navelement" id="signin" style="border-bottom: 2px solid gray;">Sign In</h3>
        </button>
    </li>
    <li class="nav-item">
        <button class="nav-button-right" (click)="changeForgot()">
            <h3 class="navelement" id="forgot">Forgot Password</h3>
        </button>
    </li>
</ul>

Моя панель навигации - это не что иное, как список из двух кнопок: - Обе обновляют подчеркивание навигациибар и перемещается от компонента к другому с помощью этой функции:

this.router.navigateByUrl("...");

Мне нужна совершенно новая страница.Я не хочу, чтобы появлялась панель навигации логин / забытый пароль.И вот с чем я сталкиваюсь:

Проблема

Как видите, у меня есть панель навигации и "основные работы!"я тоже хочу только новую итоговую страницу с "основными работами!"появляться.

Я не сталкиваюсь ни с какой ошибкой, я просто не знаю, как это сделать.

Answer 1

Вы ищете named router outlets.При этом можно иметь несколько router-outlets на странице, где только один можно оставить без имени.В конфигурации маршрута необходимо указать свойство outlet, чтобы указать, какой компонент должен загружать в какой выход

Документация по адресу: https://angular.io/guide/router#displaying-multiple-routes-in-named-outlets

Answer 2

То, что вам нужно, - это две навигационные панели, или вызывайте навигационные панели с различными параметрами, чтобы указать, что отображать сверху, и поместите их внутри <router-outlet></router-outlet>.Потому что вы хотите показывать разные вещи (навигационные ссылки) на разных страницах.

Answer 3

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

Например, это отрывок из одного из моихapps:

const routes: Routes = [
  { path: '', component: MainComponent, children: [
    { path: '', redirectTo: 'home', pathMatch: 'full' },
    { path: 'home', component: HomeComponent },
    { path: 'blog', loadChildren: () => import('../modules/blog/blog.module').then(m => m.BlogModule)},
    { path: 'about', component: AboutComponent },
    { path: 'contact', component: ContactComponent },
    { path: 'legal', component: ImpressumComponent },
    { path: 'privacy', component: PrivacyComponent },
    { path: 'signin', component: SigninComponent },
    { path: 'signup', component: SignupComponent },
    { path: 'signout', component: SignoutComponent },
    { path: '**', component: NotFoundComponent }
  ]}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Здесь в этом примере MainComponent имеет одну <router-outlet></router-outlet>, а страницы blog загружаются при отложенной загрузке, что также означает, что BlogModule имеет свою собственную <router-outlet></router-outlet> и настройка маршрутизации.Это будет импортировано туда с RouterModule.forChild(routes).Для получения дополнительной информации вам нужно глубже погрузиться в документы и их приложение Heroes.

Импортируйте этот модуль маршрутизации в свой основной AppModule:

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AboutComponent,
    PrivacyComponent,
    ImpressumComponent,
    NotFoundComponent,
    ContactComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Для навигации вы можете простонастройте routerLink атрибуты:

<mat-toolbar color="primary">
  <app-page-content>
    <a routerLink="/home" mat-button><i class="material-icons" style="margin-bottom: 3px">home</i> Home</a>
    <a routerLink="/blog" mat-button><i class="material-icons" style="margin-bottom: 3px">dashboard</i> Blog</a>
    <a routerLink="/about" mat-button><i class="material-icons" style="margin-bottom: 3px">person</i> About</a>
    <a routerLink="/contact" mat-button><i class="material-icons" style="margin-bottom: 3px">mail</i> Contact</a>
    <span class="flex-spacer"></span>
    <a routerLink="signin" mat-button><span class="mi mi-person"></span></a>
  </app-page-content>
</mat-toolbar>

Если вы не понимаете всего этого, я настоятельно рекомендую вам внимательно изучить угловой курс.Просто наберите на YouTube "Angular Crash Course 2019", там есть довольно хороший!