Question

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

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

//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

如评论中所指出的，将您的导航栏提取到app.component.html中，使其为<router-outlet></router-outlet>

路由器插座标签将根据您当前的URL替换，因此，如果您希望始终保持导航栏可见，则可以选择

将其包含在每个组件中-不好的主意，因为它是代码重复和很多不必要的渲染
将其提取到外部->这样做的良好实践。

如果您仍想隐藏它（例如在登录屏幕上），则可以使用navbar组件来隐藏它，并观察当前活动的url，如下所示：

  constructor(private activatedRoute: ActivatedRoute) {
  }

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

根据当前网址，您可以隐藏或显示（例如，使用*ngIf导航栏。

为多模块角度应用程序创建路由

1 个答案: