##错误
After Click Product it shows this
##主代码.ts
import { bootstrap } from '@angular/platform-browser-dynamic';
import { APP_ROUTER_PROVIDERS } from '../app/app.routes';
import { AppComponent } from '../app/app.component';
bootstrap(AppComponent, [APP_ROUTER_PROVIDERS]);
##应用程序.组成部分
import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
@Component({
selector: 'demo-app',
template: `
<div class="outer-outlet">
<router-outlet></router-outlet>
</div>
`,
directives: [ROUTER_DIRECTIVES]
})
export class AppComponent { }
##应用程序.路由
import { provideRouter, RouterConfig } from '@angular/router';
import { AboutComponent, AboutHomeComponent, AboutItemComponent } from '../app/about.component';
import { HomeComponent } from '../app/home.component';
export const routes: RouterConfig = [
{
path: '',
component: HomeComponent
},
{
path: 'admin',
component: AboutComponent,
children: [
{
path: '',
component: AboutHomeComponent
},
{
path: '/product',
component: AboutItemComponent
}
]
}
];
export const APP_ROUTER_PROVIDERS = [
provideRouter(routes)
];
##回家.组成部分
import { Component } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl:'../app/layouts/login.html'
})
export class HomeComponent { }
##大约.组成部分
import { Component } from '@angular/core';
import { ActivatedRoute, ROUTER_DIRECTIVES } from '@angular/router';
@Component({
selector: 'about-home',
template: `<h3>user</h3>`
})
export class AboutHomeComponent { }
@Component({
selector: 'about-item',
template: `<h3>product</h3>`
})
export class AboutItemComponent { }
@Component({
selector: 'app-about',
templateUrl: '../app/layouts/admin.html',
directives: [ROUTER_DIRECTIVES]
})
export class AboutComponent { }