0

我是 angular 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>

问题是每当我取消注释“app-about”和“app-home”时，我都可以看到我的组件，否则我的页面上什么都没有。

也告诉我之间的区别

<router-outlet>
        <!--<app-home></app-home>-->
        <!--<app-contact-us></app-contact-us>-->
        <!--<app-about></app-about>-->
      </router-outlet>

简单

<router-outlet>
      </router-outlet>
4

0 回答 0