Маршрутизация пустых компонентов Angular 2

Я новичок в Angular 2, и у меня есть вопрос о маршрутизации. У меня есть файл app.routing, в котором мне нужен только один путь.

{path: 'signup', component: SignupComponent}

Но если я запускаю этот код, я получаю сообщение об ошибке:

Error: Uncaught (in promise): Error: Cannot match any routes: ''

Поэтому я решил просто использовать пустой компонент на пути ' ', который работает именно так, как я хотел.

Файл маршрутизации:

import {Routes, RouterModule} from '@angular/router';
import {SignupComponent} from "./signup/signup.component";
import {EmptyComponent} from "./empty/empty.component";

const appRoutes:Routes = [
    {path: '', component: EmptyComponent},
    {path: 'signup', component: SignupComponent}
];

export const appRoutingProviders = [];

export const routing = RouterModule.forRoot(appRoutes);

Файл с роутером-розеткой:

<header>
    <div class="btn-wrapper">
        <button class="btn-sign-up btn-fancy" routerLink="/signup">Sign Up</button>
        <button class="btn-sign-in btn-ghost btn-fancy">Sign In</button>
    </div>
    <i class="material-icons more">keyboard_arrow_down</i>
    <router-outlet></router-outlet>
    <div class="overlay" *ngIf="overlay" (click)="close()"></div>
    <div class="tinted"></div>
</header>

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


angular angular2-routing
person Mike    schedule 24.09.2016    source источник

Ответы (2)


arrow_upward
8
arrow_downward

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

const appRoutes:Routes = [
    {path: '', redirectTo: 'signup', pathMatch: 'full'}, 
    {path: 'signup', component: SignupComponent}
];

Или, если вы хотите, чтобы выход маршрутизатора был пуст, пока вы не перейдете к signup, оставьте четыре полностью пустыми:

const appRoutes:Routes = [
    {path: '', children: []}, 
    {path: 'signup', component: SignupComponent}
];
person nickspoon    schedule 24.09.2016
comment
Спасибо за Ваш ответ! Но я не хочу, чтобы что-то маршрутизировалось по пути ' '. SignupComponent должен отображаться только при «регистрации». - person Mike; 25.09.2016
comment
Еще раз спасибо, но теперь я получаю эту ошибку: Неверная конфигурация маршрута '': должно быть предоставлено одно из следующих (компонент или redirectTo или дочерние элементы или loadChildren) - person Mike; 25.09.2016
comment
Да неужели? Это работало в предыдущей бета-версии, но, возможно, больше не работает, извините. Какую версию углового вы используете? 2.0.0 финал? - person nickspoon; 25.09.2016
comment
Без проблем. Да, я использую версию 2.0.0. - person Mike; 25.09.2016
comment
У меня такая же проблема в финальной версии, мне нужен абсолютно пустой маршрут, но {path: ''"} выдает ошибку - person Daimz; 13.11.2016
comment
Ошибка в роутере 3.1.2, попробуйте 3.1.1 или 3.2.0-rc. 0 - person nickspoon; 13.11.2016
comment
пустой путь не работает в @angular/router v3.4.1 Необходимо указать одно из следующего: компонент, redirectTo, дочерние элементы или loadChildren - person Nelson; 26.01.2017
comment
решение состоит в том, чтобы добавить пустых дочерних элементов, например, children: [] - person Nelson; 26.01.2017

arrow_upward
1
arrow_downward

Опция 1:

Если вы знаете, что в дочерней розетке маршрутизатора нечего показывать, вы можете скрыть это. Тогда вы не получите ошибку.

<router-outlet *ngIf="hasNoQuestionSelected$ | async"></router-outlet>

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

Любопытно услышать, думают ли люди, что это ужасное или законное решение.

PS. Не путайтесь с EmptyOutletComponent Angular. Это связано, но не одно и то же, и фактически добавляет новый router-outlet для пустых маршрутов.

--

Вариант 2:

У вас может быть маршрут, который имеет только путь и не содержит дочерних элементов, компонентов или перенаправлений.

Вы по-прежнему можете запросить моментальный снимок ActivatedRoute и пройтись по дереву, чтобы найти нужные параметры — они все еще там. Но без <router-outlet> маршрутизатор не будет пытаться что-либо делать сам — это зависит от вас. Или вы все еще можете определить компонент, а затем на основе условия (например, ширины экрана) решить, показывать или скрывать router-outlet для его использования.

Зачем мне это нужно, спросите вы? Иногда с адаптивным дизайном для разных размеров экрана мне нужно совершенно другое поведение. Иногда это требует «покопаться» в snapshot.children[0].routeData, чтобы получить параметры URL. Затем я просто покажу компонент в основном компоненте.

Просто добавьте это как еще одну альтернативу для определенных случаев.

{
    path: 'contactus',
    component: ContactUsComponent,

    children: [
        {
            path: 'topics',
            pathMatch: 'full',
            redirectTo: '/support/contactus'
        },
        {
            path: ':category',

            children: 
            [
                {
                    path: ':question'
                    // component: ContactUsFormComponent
                }
            ]
        }
    ]
},
person Simon_Weaver    schedule 19.02.2019