相关疑难解决方法(0)
在角度4中为不同页面设置不同布局的最佳方法
我是角色4的新手.我想要实现的是为我的应用程序中的不同页面设置不同的布局页眉和页脚.我有三种不同的情况:
- 登录,注册页面(无标题,无页脚)
路线:['登录','注册']
- 营销网站页面(这是根路径,它有一个页眉和页脚,大多数这些部分在登录前到来)
路线:['','关于','联系']
- 应用程序登录页面(我在本节中对所有应用程序页面都有不同的页眉和页脚,但此页眉和页脚与市场营销网站页眉和页脚不同)
路线:['仪表板','个人资料']
我通过在路由器组件html中添加页眉和页脚来临时运行应用程序.
请告诉我一个更好的方法.
这是我的代码:
应用程序\ app.routing.ts
const appRoutes: Routes = [
{ path: '', component: HomeComponent},
{ path: 'about', component: AboutComponent},
{ path: 'contact', component: ContactComponent},
{ path: 'login', component: LoginComponent },
{ path: 'register', component: RegisterComponent },
{ path: 'dashboard', component: DashboardComponent },
{ path: 'profile', component: ProfileComponent },
// otherwise redirect to home
{ path: '**', redirectTo: '' }
];
export const routing = RouterModule.forRoot(appRoutes);
app.component.html
<router-outlet></router-outlet>
应用程序/家/ home.component.html
<site-header></site-header>
<div class="container"> …推荐指数
解决办法
查看次数
Angular(2+)中嵌套路由中的多个布局
我正在创建一个类似于应用程序的仪表板.我想在Angular(2+)中实现以下布局计划:
- 路线 - 名称 - 布局
- / - 主页 - 带表格和图表的全宽布局等
- / reports - 报告页面 - 具有更多表格的相同全宽度布局等
- / login - 登录页面 - 没有全宽度布局,只是屏幕中心的简单登录表单
- / signup - 注册页面 - 没有全宽度布局,只是屏幕中心的简单注册表单
- / messages - 电子邮件 - 全宽布局
- / messages/new - 新电子邮件 - 中等布局,不从全宽布局继承
等等...
所以基本上我想做的是完全替换<body>某些(子)路由的内容.
这对我来说不好:角度为2的不同页面的多个布局,因为我不想将/(root)重定向到像/ home这样的任何地方.
这个也不适合:如何在Angular2中切换布局
任何帮助都会很棒!
推荐指数
解决办法
查看次数
如果用户未登录，则始终转到登录页面的角度路由
我想设置我的 Angular 路线以执行以下操作：
如果用户未登录，则网站的登陆页面 ( http://localhost:4200 ) 和任何其他路由都应转到 LoginComponent。
如果用户已登录，网站的登陆页面 ( http://localhost:4200 ) 和任何不匹配的路由都应转到 DashboardComponent。如果路由匹配，则应转到正确的组件。
所有匹配的路由都应该受到 AuthGuard 的保护，它检查用户是否登录。如果用户没有登录，它们应该以 LoginComponent 结束。（AuthGuard 处理此重定向）。
我面临的一个主要问题是，我不希望 LoginComponent 成为我的 app.component 结构的一部分，该结构中有一个路由器出口（即页眉、页脚、侧边栏）。相反，我只希望登录页面只显示 LoginComponent.html 中的内容。
以下是我目前的路线：
const routes: Routes = [
{ path: 'login', component: LoginComponent },
{ path: '', redirectTo: '/dashboard', pathMatch: 'full', canActivate: [AuthGuard] },
{ path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] },
{ path: 'projects', component: ProjectListComponent, canActivate: [AuthGuard] },
{ path: 'projects/new', component: ProjectDetailComponent, canActivate: [AuthGuard] },
{ path: 'projects/edit/:id', component: ProjectDetailComponent, canActivate: …推荐指数
解决办法
查看次数
Angular2 - 多个模块的共享布局
我用不同的模块构建了一个 Angular 应用程序。每个模块处理不同的任务。在我的登陆页面上，用户应该登录或注册。这是一个非常精简的布局，没有任何导航。在我的功能模块（登录后可以访问）上，用户可以执行任务和搜索信息。
我的主要问题是，我的功能模块应该共享相同的布局（带有导航、工具栏等），而我的 AuthModule 不应具有相同的布局。下图应该说明我试图实现的目标。
每个模块（身份验证和功能）都有自己的 RoutingModule 和不同的组件集。对 Layout2 和 FeatureModules 的访问受 AuthService/AuthGuards 保护。
我已经为基于组件的设置找到了很好的解决方案（/sf/answers/2835616311/和https://stackblitz.com/edit/angular-multi-layout-example?file=app%2Fapp。 routing.ts ) 但不适用于基于模块的模块。我想延迟加载功能模块，这不能应用于我找到的给定解决方案（至少它不适用于模块）。
我可以做些什么来共享模块之间的布局，或者换句话说“在布局组件中加载模块”？
我目前的代码片段是：
应用组件
<router-outlet></router-outlet>
用户区组件
<mat-toolbar color="primary" class="mat-elevation-z2" *ngIf="(auth.account$ | async) as account">
<button mat-button class="pull-left" [disabled]="!account" (click)="sidenav.toggle()">
<i class="fa fa-navicon" aria-hidden="true"></i> SiteName
</button>
<button mat-button class="pull-left ml-3 pull-left" routerLink="/settings/profile">
<img [src]="account.userID | avatar" class="rounded-circle mr-1" width="30" height="30">
<span class="d-none d-sm-inline"> {{account.name}}</span>
</button>
<button id="logoutButton" mat-button class="pull-right" routerLink="/auth/logout">
<i class="fa fa-power-off" aria-hidden="true"></i><span class="d-none d-sm-inline"> Logout</span>
</button>
</mat-toolbar>
<mat-sidenav-container …推荐指数
解决办法
查看次数