路由器出口外的角分量

Question

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

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

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

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

但它与导航组件一起加载到路由器插座中。我想将它作为一个完整的页面加载，没有导航或任何其他组件。

实现这一目标的最佳方法是什么。

Answer 1

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

看看这个示例 StackBlitz 项目。

如果你仔细看看它的路由配置：

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' }
];

你会看到 login 是一个没有 Header 显示的外层路由。但是一旦用户登录，用户就会被导航到''加载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) {
  }
}