##错误

enter image description here

After Click Product it shows this enter image description here

##主代码.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 { }
      

推荐答案

我认为你的错误在于你的路由应该是product而不是/product.

更像是

  children: [
  { 
    path: '', 
    component: AboutHomeComponent
   },
   { 
    path: 'product', 
    component: AboutItemComponent 
   }
 ]

Typescript相关问答推荐

React-Native运行方法通过监听另一个状态来更新一个状态

如何推断类方法未知返回类型并在属性中使用它

带有微前端的动态React路由问题

是否可以根据嵌套属性来更改接口中属性的类型?

React router 6.22.3不只是在生产模式下显示,为什么?

在配置对象上映射时,类型脚本不正确地推断函数参数

React重定向参数

在另一个类型的函数中,编译器不会推断模板文字类型

如何缩小函数的返回类型?

TypeScrip错误:为循环中的对象属性赋值

S,为什么我的T扩展未定义的条件在属性的上下文中不起作用?

如何在try 运行独立的文字脚本Angular 项目时修复Visual Studio中的MODULE_NOT_FOUND

使用强类型元组实现[Symbol.iterator]的类型脚本?

如何使函数参数数组不相交?

我如何键入它,以便具有字符串或数字构造函数的数组可以作为字符串或数字键入s或n

Typescript:是否将联合类型传递给重载函数?

从泛型对象数组构造映射类型

如何向我的自定义样式组件声明 custom.d.ts ?

基于参数的 TS 返回类型

Typescript 编译错误:TS2339:类型string上不存在属性props