我试图从文档中了解Angular 2中的基本路由是如何工作的,但是我没有得到它。
我设置了一个PLUNK ,我有一个导航栏。 目标是让“关于”按钮将用户带到about组件。 组件已经在插件中。
我最初在这里写了更多,但它归结为我不明白为什么我的路由不起作用的事实(我觉得我设置正确):
<a routerLink="/home-page" routerLinkActive="active">Home</a>单击时该代码不执行任何操作。 我的路线定义如下:
import { Routes } from '@angular/router'; import { AboutPage } from './about-page.component.ts' import { HomePage } from './home-page.component.ts' export const appRoutes: Routes = [ { path: 'home-page', component: HomePage }, { path: 'about-page', component: AboutPage } ];此外,无论出于何种原因,在navbar.components.ts中放置<router-outlet></router-outlet> navbar.components.ts显示路由器出口未找到并抛出。 此外,我99%确定基本href设置正确,所以可能不需要检查。
简而言之,我如何使我的路线工作?
I am trying to understand how very basic routing works in Angular 2 from the docs and I don't get it.
I set up a PLUNK where I have a navbar. The goal is to have the 'About' button take the user to the about component. The components are already in the plunk.
I initially wrote more here, but it comes down to the fact that I don't understand why my routing doesn't work (I feel like I set it up correctly):
<a routerLink="/home-page" routerLinkActive="active">Home</a>That code doesn't do anything when clicked. My route definitions look like this:
import { Routes } from '@angular/router'; import { AboutPage } from './about-page.component.ts' import { HomePage } from './home-page.component.ts' export const appRoutes: Routes = [ { path: 'home-page', component: HomePage }, { path: 'about-page', component: AboutPage } ];Also, for whatever reason, putting <router-outlet></router-outlet> in navbar.components.ts shows router-outlet as not found and throws. Also, I am 99% percent sure that base href is set up correctly, so probably no need to check that.
In short, how do I make my routes work?
最满意答案
1)将所有.ts文件添加到src文件夹中
2)您需要导入 RouterModule ,然后将其与 forRoot()方法一起使用 ,如 app.routing.ts所示 import { Routes,RouterModule } from '@angular/router'; export const routing = RouterModule.forRoot(appRoutes);
3)现在,您需要在 @ NgModule的导入元数据中导入 路由 。 @NgModule({ imports: [ BrowserModule,routing ], ... })
4)最后,在 app.routing.ts中添加了 默认路由 export const appRoutes: Routes = [ {path:'',redirectTo:'home-page',pathMatch: 'full'}, ... ... ];
工作演示: http : //plnkr.co/edit/mEvR1vU8EEkctNikaNAi?p=preview
1) added all .ts files into src folder
2) You need to import RouterModule and then use it with forRoot() method as shown in app.routing.ts import { Routes,RouterModule } from '@angular/router'; export const routing = RouterModule.forRoot(appRoutes);
3) Now, you need to import routing in @NgModule's imports metadata. @NgModule({ imports: [ BrowserModule,routing ], ... })
4) Last, added default route in app.routing.ts export const appRoutes: Routes = [ {path:'',redirectTo:'home-page',pathMatch: 'full'}, ... ... ];
Working Demo : http://plnkr.co/edit/mEvR1vU8EEkctNikaNAi?p=preview
更多推荐
发布评论