Question

我想使用错误组件显示错误消息，但不想为经过身份验证的用户在<router-outlet></router-outlet>内加载该组件，因此也不应显示导航菜单。

我有这样的应用程序组件。

<div>
<nav><nav>
<router-outlet></router-outlet>
</div>

我有错误处理程序，该错误处理程序使用router.navigate路由到错误组件。

但是它与nav组件一起装入路由器出口。我想将其加载为整个页面，而没有导航或任何其他组件。

实现此目标的最佳方法是什么？

Answer 1

您可以使用Shell组件作为需要查看标题的登录用户的入口点。

看看这个Sample StackBlitz project。

如果您仔细看一下它的路由配置：

const appRoutes: Routes = [
  {
    path: '',
    component: ShellComponent,
    children: [
      { path: 'dashboard', component: DashboardComponent },
      { path: 'contactus', component: ContactComponent },
      { path: 'events', component: EventsListComponent },
      { path: 'events/:id', component: EventDetailsComponent },
      { path: 'home', component: HomeComponent },
      { path: 'view', component: ViewPostComponent },
      { path: '', component: PlaceholderComponent }
    ]
  },
  { path: 'login', component: LoginComponent },
  { path: 'error', component: ErrorComponent },
  { path: '', redirectTo: '/login', pathMatch: 'full' }
];

您会看到登录名是外层路由，其中不会显示任何标题。但是，一旦用户登录，该用户就会导航到''路由的子路由之一，从而加载ShellComponent。

因此，您基本上可以创建与'error'路由相同级别的另一个路由（'login'），然后相应地将用户导航到ErrorComponent。

Answer 2

带有Rx的服务在您的情况下非常有用，可以在根组件上订阅和显示，并且您可以在任何地方附加消息，例如

服务

@Injectable()
export class MessageService {
  messages$: Subject<string[]>;
  constructor() {
    this.messages$ = new Subject<string[]>();
   }

  error(content: string) {
    this.messages$.next(content);
  }
}

组件html

<div [value]="msgService.messages$ | async"></div>

组件

export class LayoutComponent {
  constructor(public msgService: MessageService) {
  }
}

Answer 3

仅在错误页面上使用根级路由，因此它不会是任何子项。

类似的东西：

const routes: Routes = [
        { path: 'main', component: LayoutComponent, children: [
            { path: 'profile/:userid', component: UserprofileComponent },
            { path: 'settings/:userid', component: UsersettingsComponent },
            //....
        ]},
        { path: 'error/:statuscode', component: ErrorPageComponent },
        { path: '**', redirectTo: '/error/404'}
    ];

路由器出口外部的角组件

3 个答案: