Question

我正在尝试使用Angular的Material设计实现动态导航栏。但是，我似乎无法弄清楚为什么它没有正确显示.. 屏幕截图：http://prntscr.com/fv9l2i 有人可以帮我弄明白我搞砸了吗？

navBar.comp.html：

    <nav md-tab-nav-bar>
      <a md-tab-link
         *ngFor="let link of navLinks"
         [routerLink]="navLinks.link"
         routerLinkActive #rla="routerLinkActive"
         [active]="rla.isActive">
        {{navLinks.label}}
      </a>
    </nav>

    <router-outlet></router-outlet>
    Current Area:
    Fun  &nbsp;<md-slide-toggle
    class="example-margin"
    [color]="color"
    [checked]="checked"
    (change)="onChange($event)">Information</md-slide-toggle>

navBar.comp.ts

    import { Component, OnInit, Injectable } from '@angular/core';
    import { Router } from '@angular/router';

    @Injectable()
    @Component({
      selector: 'nav-Bar',
        templateUrl: 'navBar.component.html'
    })

    export class NavBarComponent implements OnInit {

        navLinks: any[];
        activeLinkIndex = 0;
        constructor(private router: Router) {
          this.navLinks = [
          {label: 'Profile', link: '/profile/', index: '0'},
          {label: 'Notification', link: '/notifications/', index: '1'},
          {label: 'Home', link: '', index: '3'},
          {label: 'My Cards', link: '/cards/', index: '4'},
          {label: 'Create a Card', link: '/post/', index: '5'},
          {label: 'Logout', link: '/login/', index: '6'},
        ];
        }

        ngOnInit() {
            // get posts from secure api end point
        //    this.profileService.getUser()
        //        .subscribe(author => {
        //            this.author = author;
          //      });
        }
    }

app.routing.ts

    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: '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);

Answer 1

您应该使用{{link.label}}代替{{navLinks.label}}

您应该将[routerLink]="navLinks.link"更新为[routerLink]="link.link"

我的md-tab-nav-bar是空白的

1 个答案: