Question

我是角度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>

路由器奥特莱斯Angular 2

0 个答案: