Question

我正在尝试在角度2中进行路由但它不起作用。我有一个列表页面，其中列出了一些新闻。当用户点击新闻时，它必须重定向到详细信息页面。但它不起作用，我在控制台中没有收到任何错误。

Listing.component.html：

    <div *ngFor="let List of HomeList |slice :1:5;let isFirstRow=first;let last=last;" >
       <button (click)="getDetail(List.ArticleId)">Get Detail</button>
        <a [routerLink]="['/detail', List.ArticleId]">
          <h4 [ngClass]="(isFirstRow)?'TopLeftNews':'TopLesftOtherNews'">
            {{List.HeadLine}}
           </h4>
        </a>
         <time>{{List.UpdatedDate}}</time>
         <p class="TopLeftAbstract">{{List.Abstract}}</p>
         <hr *ngIf="!last" class="hr-1x">
    </div>

Listing.component.cs：

getDetail(id:any): void {
    this.router.navigate(['/detail', id]);
}

app.routing.ts：

const MainMenu_Routes:Routes=[
    {
        //Redirect to a URL
        path:'',
        redirectTo:'/home',
        pathMatch:'full'
    },
    {
        //Mapping a Route to a Component 
        path:'home',
        component:HomeComponent
    },
    { 
        //Handling "Page Not Found"
        path: "**",
        redirectTo:"/home"
    },
    { 
        //Configure Parameters 
        path: 'detail/:id', 
        component: ArticleDetailComponent 
    }, 

];

export const Const_Routing=RouterModule.forRoot(MainMenu_Routes);

app.module.ts：

@NgModule({
  declarations: [
    AppComponent,
    MenuComponent,
    HomeComponent,
    ArticleDetailComponent
  ],
  imports: [
    BrowserModule,
    Const_Routing,
    HttpModule
  ],
  providers: [SharedService,IndexedDBService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

捕获错误路由的通用路由需要位于routes数组的末尾。当路由器查看数组时，如果它到达通用路由，它将使用它而不通过，因此它必须是数组中的最后一条路径。

尝试将路线更改为：

[
    {
        //Redirect to a URL
        path:'',
        redirectTo:'/home',
        pathMatch:'full'
    },
    {
        //Mapping a Route to a Component 
        path:'home',
        component:HomeComponent
    },
    { 
        //Configure Parameters 
        path: 'detail/:id', 
        component: ArticleDetailComponent 
    },
    { 
        //Handling "Page Not Found"
        path: "**",
        redirectTo:"/home"
    }
];

路由在角度2中不起作用？

1 个答案: