javascript - 为多模块 Angular 应用程序创建路由

Question

我是 Angular 的新手。我在 Angular 应用程序中有一个多模块结构，例如登录、用户、报告等。每个模块都有一个或两个组件。我想实现路由，但登录页面应该首先显示。当用户在登录窗口导航不应该显示。当用户登录时，它会重定向到仪表板。在仪表板上，导航栏应显示 & 当用户单击该组件应显示在导航栏下方的任何菜单时。

目前，当我点击菜单时，它会重定向到该组件并隐藏导航栏。

//app.routing.module.ts
const routes: Routes = [
  { path: '', component: LoginComponent }, 
  { path: 'dashboard', component: DashboardComponent }, 
  { path: 'user', component: AddUserComponent }, 
  { path: 'trello', component: TrelloDataComponent }, 
  { path: 'calender', component: CalenderComponent }, 
  { path: 'clockify', component: ClockifyDataComponent }, 
  { path: 'rescueAll', component: AllDataComponent }, 
  { path: 'rescueDate', component: AllDataComponent }, 
  { path: '**', component: PageNotFoundComponent }
];

// app.module.ts

imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,

    CalModule,
    ClokifyModule,
    LoginModule,
    RescueModule,
    TrelloModule,
    UserModule,
    PagenotfoundModule
  ]

 //app.component.html
    <router-outlet></router-outlet> 

Answer 1

正如评论中指出的那样，将 navbar 提取到 app.component.html 之外，这样它将是 <router-outlet></router-outlet>

路由器 socket 标签将根据您当前的 URL 进行替换，因此如果您希望始终显示导航栏，您要么

1. 将它包含在每个组件中 - 坏主意，因为它是代码重复和大量不必要的渲染
2. 将其提取到外部 --> 这样做的良好做法。

如果您仍然想隐藏它，例如在登录屏幕上，您可以使用导航栏组件来隐藏它，同时查看当前事件的 url，如下所示:

  constructor(private activatedRoute: ActivatedRoute) {
  }

  ngOnInit() {
    this.activatedRoute
      .params
      .subscribe(
        params => {
          console.log("current url parameters:", params);
        }
      );
  }

并且根据当前 url，您可以隐藏或显示(例如 *ngIf 导航栏。