Question

我有一个使用Angular 2的Material设计的导航栏。我遇到了多种解决方案让它发挥作用。但我想要完成的是：每当我尝试这些其他解决方案时，“材料动画”就不再起作用了。所以我试图对此实施修复，但我的路由器插座不断阻碍，因为我需要检查人们是否经过身份验证。我有2个路径/注册和/登录需要在主应用程序容器之外，然后在主应用程序容器内我有一个md-tab导航栏组件，内容是整个组件。我无法弄清楚如何从导航栏中分离/注册和/登录它是“儿童”

navbar.html：

sum=k+0+0

app.routing：

    <md-tab-group>
      <md-tab label="Profile"><profile></profile></md-tab>
      <md-tab label="Notification"><notification></notification></md-tab>
      <md-tab label="Home"><home></home></md-tab>
      <md-tab label="Create a Card"><create-Post></create-Post></md-tab>
      <md-tab label="Logout"></md-tab>
      Current Area:
      Fun  &nbsp;<md-slide-toggle
    class="example-margin"
    [color]="color"
    [checked]="checked"
    (change)="onChange($event)">Information</md-slide-toggle>

    </md-tab-group>

app.component.html：

    import { Routes, RouterModule } from '@angular/router';
    import { LoginComponent } from './login/index';
    import { HomeComponent } from './home/index';
    import { ProfileComponent } from './profile/index';
    import { CreatePostComponent } from './createPost/index';
    import { UserPostsComponent } from './userposts/index';
    import { RegisterComponent } from './register/index';
    import { NotificationComponent } from './notification/index';
    import { NavBarComponent } from './navBar/index';
    import { AuthGuard } from './_guards/index';

    const appRoutes: Routes = [
        { path: 'login', component: LoginComponent },
        { path: 'register', component: RegisterComponent },
        { path: '', component: HomeComponent, canActivate: [AuthGuard] },
          { path: '', component: NavBarComponent, canActivate: [AuthGuard] },
        { path: 'profile', component: ProfileComponent, canActivate: [AuthGuard] },
        { path: 'post', component: CreatePostComponent, canActivate: [AuthGuard] },
        { path: 'cards', component: UserPostsComponent, canActivate: [AuthGuard] },
        { path: 'notifications', component: NotificationComponent, canActivate: [AuthGuard] },
        // otherwise redirect to home
        { path: '**', redirectTo: '' }
    ];

    export const routing = RouterModule.forRoot(appRoutes);

使用带有md-tab的<router-outlet>

0 个答案: