路由器奥特莱斯Angular 2

时间:2017-03-26 17:19:22

标签: angular router-outlet

我是角度2的新手,因为路由器插座是动态的,他们用out组件替换元素(如果我错了,请纠正我)。为什么使用路由器插座不显示我的组件?

这是我的路由配置:

import { Routes } from '@angular/router'
import { AppComponent } from './app.component'
import { DashBoardComponent } from './dash-board/dash-board.component'
import { LoginComponent } from './login/login.component'
import { AboutComponent } from './about/about.component'
import { ContactUsComponent } from './contact-us/contact-us.component'
import { HomeComponent } from './home/home.component'

export const rout: Routes = [
    { path: '', redirectTo: 'login', pathMatch: 'full' },
    { path: 'login', component: LoginComponent },
    {
        path: 'dashBoard', component: DashBoardComponent, children: [
            { path: '', redirectTo: 'home', pathMatch: 'full' },
            { path: 'contact', component: ContactUsComponent },
            { path: 'home', component: HomeComponent },
            { path: 'about', component: AboutComponent }
        ]
    }
];

在我的仪表板组件中(当我登录时导航到)我有

<a routerLink='home'>Home</a>
 <a routerLink='about'>About</a>
 <a routerLink='contact'>Contact</a>
<router-outlet>
    <!--<app-home></app-home>-->
    <!--<app-contact-us></app-contact-us>-->
    <!--<app-about></app-about>-->
  </router-outlet>

问题是每当我取消评论&#34; app-about&#34;和&#34; app-home&#34; ,我可以看到我的组件,否则我的页面上什么都没有。

还告诉我

之间的区别
<router-outlet>
        <!--<app-home></app-home>-->
        <!--<app-contact-us></app-contact-us>-->
        <!--<app-about></app-about>-->
      </router-outlet>

简单

<router-outlet>
      </router-outlet>

0 个答案:

没有答案