私は管理パネルを持っていますが、ページを移動するためのルータを使用しています。管理パネルは、サイドバー(コンポーネント)、ヘッダ(コンポーネント)、コンテンツ(コンポーネント)で構成されます。コンテンツでは、私は<router-outlet></router-outlet>
を入れた。私は、コンテンツ内に<router-outlet></router-outlet>
があるので、ページ内のサイドバーとヘッダーを表示するには、自動化にLoginComponentを使用します。私は可視性サイドバー(Component)、ヘッダ(Component)に* ngIfの指示を使用しますが、私の意見ではベストプラクティスではありません。私は他の変種でそれを行うことはできますか? 私のフォルダ構造: Angular2:承認ルーティングの後
0
A
答えて
0
私はこの問題を解決するために "loadChildren"を使用します。 autorization、ローディングdashboard.module後app.routing.module.ts
const routes: Routes = [
{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },
{ path: 'dashboard', loadChildren:() => DashboardModule, canActivate: [AuthGuard]},
{ path: 'login', component: LoginComponent}
]
ダッシュボードrouting.module.ts
const dashboardRoutes: Routes = [
{
path: '',
component: DashboardComponent,
children : [
{
path: '',
children:[
{ path: 'user', component: UserComponent, canActivate: [DashboardGuard] },
{ path: 'user-crud', component: UserCrudComponent, canActivate: [DashboardGuard] },
{ path: 'user-crud/:id', component: UserCrudComponent, canActivate: [DashboardGuard] }
]
},
app.component.tsでこのコードをこのコードで、このコードは、このコンポーネントの<router-outlet></router-outlet>
に表示されます。
import { Component, OnInit} from '@angular/core';
@Component({
selector: 'app-root',
template: '<router-outlet></router-outlet>'
})
export class AppComponent implements OnInit {
constructor(){}
ngOnInit() {}
}
このコードはcontent.component.tsにあり、すべてのページにこのコンポーネントが表示されます。
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-content',
template: '<router-outlet></router-outlet>'
})
export class ContentComponent implements OnInit {
constructor() {}
ngOnInit() {}
}
関連する問題
- 1. Angular2での承認
- 2. angular2基本承認 - 405
- 3. angular2ログインとその後のルーティング
- 4. ルーティングAngular2
- 5. Angular2 - デプロイメントモード後にルーティングが停止する
- 6. Angular2ルーティング、データ
- 7. Angular2補助ルーティング
- 8. Angular2ルーティングをデバッグ
- 9. Angular2ルーティングwith .NETコア
- 10. Asp.net 4.5でAngular2ルーティング
- 11. 承認後にFacebook上でアプリケーションを承認
- 12. Angular2:ルーティングの子とのデータバインド
- 13. 子ルーティングのangular2のredirectTo
- 14. Angular2ルーティング、ヘビーページ、ナビゲーションのシミュレート
- 15. Angular2ルーティングの使い方
- 16. コンポーネントコンストラクタでAngular2ルーティングが例外の後に動作しない
- 17. angular2の配備後にルーティングが機能しない
- 18. 単一テーブル継承ルーティング?
- 19. Angular2ルーティングno HashLocationStrategyでもハッシュ
- 20. Angular2ルーティング:redirectTo相対URL
- 21. Angular2ルーティング、ルーティングは、私が質問angular2のルーティングparametresといくつかの問題を持っている
- 22. angular2-jwtにヘッダの承認がありません
- 23. Angular2 Dart - コンポーネントの継承
- 24. Angular2とクラス継承のサポート
- 25. Angular2 - 各モジュールのアドオンのインポート...ルーティングの?
- 26. Angular2- typescriptの新しいコンポーネントへのルーティング
- 27. angular2のモジュール間のルーティング方法は?
- 28. Angular2ルーティングの問題(URLルートオーダーの問題)
- 29. 共有ホスティングのAngular2でのルーティング
- 30. アプリケーションの外部へのルーティングAngular2
可能であれば、少し明確にしてください。あなたは何をしようとしているのですか ? 私が正しく理解していれば、権限がない場合にコンポーネントを表示/非表示にするには '* ngIf'を使いますが、これ以上のことをしたいのですか? ルータ 'Guard'を使うべきです。この記事の回答を確認してください:http://stackoverflow.com/questions/39183404/angular-2-route-restriction-with-angularfire-2-auth/39186038#39186038 –
@AlexBeugnet私はルータGuardを使用していますが、私の問題を解決しない – aimprogman