Question

对于一个学校项目，我目前正在使用Angular。我有一个完整的网站，其中包含登录，注册，主页和其他页面。我在顶部有一个mat工具栏，允许用户返回首页。

此工具栏在app.component.html中声明。问题是该html文件只能读取一次，因此我不能在其中放置变量，因此工具栏会在某些页面中显示。

您有一些建议吗？您通常如何做到这一点？我知道我可以在相关的html文件中定义它，但是它不是很优雅...

Thx =）

Answer 1

每个非延迟加载的组件都基于app.component起作用，因此，当您将工具栏放在那里时，很明显可以在每个页面上看到它。通常，我们通过用户登录时可见的延迟加载组件来解决该问题。

我将为您创建一些非延迟加载的代码，并将其编辑为延迟加载。然后，您可以比较它们并更改代码以解决此问题。

没有延迟加载

app.module.ts

vi config

app.routing.module.ts

@NgModule({
    declarations: [
        LoginComponent,
        HomeComponent,
        RegisterComponent,
        AppComponent,
        ProfileComponent
    ],

    imports: [ 
       BrowserModule,
       AppRoutingModule...
    ],

    providers: [
    ],

})
export class AppModule { }

使用该方法，您将在每个页面上与工具栏面对面。

延迟加载

app.module.ts

const routes: Routes = [
  {path: '' , component: HomeComponent },
  {path: 'register' , component: RegisterComponent },
  {path: 'login', component: LoginComponent},
  {path: 'dashboard', children: [ // here is after login, so have authguard. I didnt implement it there.
     {path: 'profile', component: ProfileComponent},
        ...

]}
]

在登录之前，您必须删除不需要的所有内容。您必须将它们添加到YourModule中。

app.routing.module.ts

@NgModule({
    declarations: [
        LoginComponent,
        HomeComponent,
        RegisterComponent,
        AppComponent,
    ],

    imports: [ 
           BrowserModule,
           AppRoutingModule...
    ],

    providers: [
    ],

})

your.module.ts

const routes: Routes = [
  {path: '' , component: HomeComponent },
  {path: 'register' , component: RegisterComponent },
  {path: 'login', component: LoginComponent},
  {path: 'dashboard', loadChildren: "pathOfYourModule>#NameOfYourModule"}
]

your.routing.module.ts

@NgModule({
    declarations: [ // your components which app will use after login.
       DashboardComponent, DashboardAppComponent, ProfileComponent
    ],

    imports: [ // modules which app will use after login
       CommonModule, YourRouingModule
    ],

    providers: [ // services which app will use after login
    ],

})
export class YourModule {}

最后，必须删除从app.component.ts和html文件中编写的所有内容。 app.component.html必须仅包含const routes: Routes = [ { path: '', component: DashboardAppComponent, children: [ { path: '', component: DashboardComponent }, { path: 'profile', component: ProfileComponent } ], }, ]; @NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule] }) export class YourRoutingModule { }

最后，现在您可以在DashboardAppComponent上声明工具栏。

如何使Angular再次读取app.component.html

1 个答案: