Question

我正在尝试在我的应用中为页面导航设置路线，但收到以下错误：

C中的错误：/my-app/src/app/router.component.ts(9,2）：输入＆＃39;（{Path：string; redirectTo：string; PathMatch：string;} | {Path ：string; component：typeof Abo ...＆＃39;不能分配给＆＃39; Route []＆＃39;。输入＆＃39; {Path：string; redirectTo：string; PathMatch：string;} | {Path：string; component：typeof Abou ...＆＃39;不能分配给＆＃39; Route＆＃39;。

代码：

export const router: Routes=[
    {Path:'', redirectTo:'about', PathMatch:'full'},
    {Path:'about', component:AboutComponent},
    {Path:'products', component:ProductsComponent},
];

Answer 1

尝试不使用大写字母：

  export const router: Routes=[
  {path:'', redirectTo:'about', pathMatch:'full'},
  {path:'about', component: AboutComponent},
  {path:'products', component: ProductsComponent},

   ];

Answer 2

当您看到这些is not assignable to type 'X'异常时，这是因为对象文字的结构与分配结构（区分大小写）不匹配。当我们检查Route接口时，这一点就变得清晰了：

export interface Route {
    path?: string;
    pathMatch?: string;
    matcher?: UrlMatcher;
    component?: Type<any>;
    redirectTo?: string;
    outlet?: string;
    canActivate?: any[];
    canActivateChild?: any[];
    canDeactivate?: any[];
    canLoad?: any[];
    data?: Data;
    resolve?: ResolveData;
    children?: Routes;
    loadChildren?: LoadChildren;
    runGuardsAndResolvers?: RunGuardsAndResolvers;
}

与javascript中的大多数属性一样，path和pathMatch都是以驼峰形式定义的。

export const router: Routes = [
  {path:'', redirectTo:'about', pathMatch:'full'},
  {path:'about', component:AboutComponent},
  {path:'products', component:ProductsComponent}
];

设置页面导航路径时出错

2 个答案: