我有一个使用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 <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);