角度2隠すコンポーネント

Question

私のテンプレートは次のようになります。この

ユーザーがログインしていないとき、私は <app-progress-bar></app-progress-bar>を非表示にする必要があり

<app-progress-bar></app-progress-bar> 
<router-outlet></router-outlet> 

、 私はユーザーがログインしている場合ときに、チェックするために警備員を使用していますユーザーが進行状況バーにログインしていない場合は非表示にする必要があります。

{ 
     path: 'login', 
     component: LoginComponent, 

    } 

このルートは、変数のユーザーでProgressBarComponent

Answer 1

ストアユーザーである<app-progress-bar></app-progress-bar>を非表示にします。ユーザーがログインしているとき、または値がtrueのとき。進捗バーが動作します。ユーザーがfalseまたはユーザーがログインユーザー変数でない場合、nullが返されます。そうではありません。

<app-progress-bar *ngIf="user" ></app-progress-bar> 

もいくつかのコードを示します。あなたに他の問題がある場合。この問題は、* ngIf構造体ディレクティブを使用して簡単に解決できます。私はこれがあなた

アプリ-プログレスバーコンポーネント用

canActivate: ['canActivateForLoggedIn'],

export const routes: Route[] = [{ 
    path: '', 
    redirectTo: "login", 
    pathMatch: "full" 
}, 
{ 
    path: 'login', 
    component: LoginComponent 
}, 
{ 
    path: 'csvtemplate', 
    component: TemplateComponent, 
    canActivate: ['canActivateForLoggedIn'], 
    children: [{ 
     path: '', 
     redirectTo: 'dashboard' 
    }, 
    { 
     path:'dashboard', 
     component: DashboardComponent 
    }, 
    { 
     path: 'csvtimeline/:month/:year', 
     component: CsvTimelineComponent, 
     canActivate: ['canActivateForLoggedIn'], 
    },{ 
     path: 'adduser', 
     component: adduserComponent 
    } 
    ] 
}]; 

と同じルートでは、その中に後

export const ROUTES_PROVIDERS = [{ 
    provide: 'canActivateForLoggedIn', 
    useValue:() => !! Meteor.userId() <--- write your condition here.. i have used meteor.. i don't know what you have used 
}]; 

を提出役立つことを願っていますcanActivate を使用して

あなたのモジュールファイルはそれをインポートしてプロバイダに入れます

@NgModule({ 
    imports: [ 
     BrowserModule, 
     FormsModule, 
     ReactiveFormsModule, 
     RouterModule.forRoot(routes), 
    ], 
    declarations: [ 
     AppComponent, 
    ], 
    providers: [ 
     ...ROUTES_PROVIDERS 
    ], 
    bootstrap: [ 
     AppComponent 
    ] 
})