Angular 2：使用插值的多個佈局文件

我正在構建一個Angular 2應用程序，需要兩個佈局文件。一個用於註銷的用戶...（登錄/註冊視圖等），一個用於登錄用戶查看實際應用程序本身。 Angular 2如何實現這一點？Angular 2：使用插值的多個佈局文件

目前，我有一個app.component.html，僅僅有

<main-navbar></main-navbar> 
<router-outlet></router-outlet>

但我需要做的是沿着線的東西：

<div [ngSwitch]="layout"> 

    <template [ngSwitchCase]="panelLayout"> 
     /* output all the html layout elements for the logged out views */ 
     <router-outlet></router-outlet> 
    <template> 

    <template [ngSwitchCase]="appLayout"> 
    /* output all the html elements for the in logged in/app views */ 
    <router-outlet></router-outlet> 
    </template> 

</div>

但我不知道在哪裏或如何設置layout變量。

我假定這個變量將最佳設置的主視圖組件內部...或者是有沒有更好的方式來做到這一點？

來源

2016-08-03 markstewie

的可能的複製[如何切換佈局在Angular2（https://stackoverflow.com/questions/38780436/how-to -switch的佈局合angular2） – Mel

可以嘗試這[在多重佈局的角度2]（https://stackoverflow.com/questions/38780436/how-to-switch-layouts-in-angular2/38783451#38783451）。希望能幫助到你。已經使用它一段時間了，無論您想在應用中使用多少佈局，它都可以很好地擴展。 – oseintow

我建議您使用不同的路由切換您的視圖，即登錄用戶的一條路由解析爲component A，另一條未登錄用戶的路由解析爲component B。

我更喜歡使用這種策略，因爲您可以使用CanActivate掛鉤阻止路由級別的用戶，即在去特定路由之前有一個驗證。如果它是假的，用戶將不會訪問該路線。如果這是真的，則路線被激活。

你可以閱讀關於如何在Routing & Navigation: CanActivate Guard文檔中使用CanActivate的文檔。

希望它有幫助。

來源

2016-08-03 02:51:00

如果未登錄，我已經使用CanActivate守護方法將用戶重定向到「/ login」路由但我想知道如何根據哪些路由/視圖組件處於活動狀態來創建用於多個路由的可重用佈局文件。 – markstewie

如果我已經明白了，是否要使用具有不同路由中顯示的不同組件的相同html文件？ –

是的，沒錯。因此，「註銷」佈局只會顯示徽標，然後是登錄表單或註冊表單的嵌套路由視圖，「登錄/應用」佈局將具有主應用導航，然後顯示每條應用路由的內容在裏面...希望這有道理？ – markstewie

我計算出我試圖用transclusion實現......據我可以看到這是不是在官方文檔提及任何地方！

它只是使用在對每個佈局的主要內容需要去佈局文件<ng-content></ng-content>的情況。

// eg: app-layout.html 
<app-header></app-header> 
<app-navbar></app-navbar> 
// content using this layout will appear below 
<ng-content></ng-content> 
<app-footer></app-footer>

然後導入和包括指令後使用的佈局是在一個視圖像

// eg: dashboard.html 
<app-layout> 
    <h1>Hello {{user}}!</h1> 
</app-layout>

希望這有助於有人試圖實現同樣的事情

來源

2016-08-03 19:21:48 markstewie

男人很抱歉，但這完全不明白。這個例子感覺未完成。 – pootzko

只需注入共享服務提供組件當前的loggedIn狀態。

@Injectable() 
class AuthService { 
    isLoggedIn = new BehaviorSubject(false); 

    ...  
}

bootstrap(AppComponent, [..., AuthService]);

@Component({ 
    template: ` 
<div [ngSwitch]="authService.isLoggedIn | async"> 

    <template [ngSwitchCase]="false"> 
     /* output all the html layout elements for the logged out views */ 
     <router-outlet></router-outlet> 
    <template> 

    <template [ngSwitchCase]="false"> 
    /* output all the html elements for the in logged in/app views */ 
    <router-outlet></router-outlet> 
    </template> 

</div> 
` 
}) 
class MyComponent { 
    constructor(private authService:AuthService) {}; 
}

參見Make AJAX request before bootstrapping Angular2 application

來源

2016-08-04 06:23:45

我很欣賞你的答案，這肯定會起作用，但對於我使用在上面描述的獨立佈局文件中構建的應用程序的大小來說，這是我首選的解決方案，因爲它使事情分離和整齊，並使用警衛來保護路線。 – markstewie

這是處理角度2中多個佈局的最佳應用嗎？類似於具有簡單佈局的登錄頁面和具有其他佈局的其他頁面 –

您可以使用路由器顯示各種視圖。這只是以各種方式顯示單個組件。 –

Angular 2：使用插值的多個佈局文件

回答

相關問題