我正在尝试在我的应用程序中使用路由,使用路由器版本3.0.0-beta.1,应用程序正在运行,但是当我点击subjects.component.html中的“下一步”按钮时,我期待获得’的内容’ profileDetails.component.html”.我创造了一个plunkr例如.这里:
http://plnkr.co/edit/jR3jnC6CzmRVCoVFrn1W?p=preview虽然由于我正在使用的角度2材料按钮等,但它不适用于plunkr,但有人能告诉我哪里出错了吗?
这是我的主要内容:
这是我的主要内容:
import {bootstrap} from '@angular/platform-browser-dynamic'; import {enableProdMode} from '@angular/core'; import {AppComponent} from './app/app.component'; import {HTTP_PROVIDERS} from '@angular/http'; import { appRouterProviders } from './app/app.routes'; //import {disableDeprecatedForms,provideForms} from '@angular/forms'; bootstrap(AppComponent,[ // disableDeprecatedForms(),// provideForms(),HTTP_PROVIDERS,appRouterProviders ]);
这是app.routes.ts:
import { provideRouter,RouterConfig } from '@angular/router'; import {SubjectsComponent} from './subjects.component'; import {ProfileDetailsComponent} from './profileDetails.component'; import {AgreementComponent} from './agreement.component'; export const routes: RouterConfig = [ { path: 'card',component: BasicCardComponent },{ path: 'subjects',component: SubjectsComponent },{ path: 'profile',component: ProfileDetailsComponent },{ path: 'agreement',component: AgreementComponent } ]; export const appRouterProviders = [ provideRouter(routes) ];
这是我的app.component.ts:
@Component({ selector: 'my-app',template: ` <a [routerLink]="['/card']"></a> <router-outlet></router-outlet> `,// templateUrl: 'app/app.component.html',styleUrls: ['app/app.component.css'],directives: [BasicCardComponent,MdButton,MdCard,MdToolbar,MdIcon,MdInput,MD_INPUT_DIRECTIVES,MdCheckbox,ROUTER_DIRECTIVES],providers:[MdIconRegistry] })
该流程有点像这个app.component.ts-> basicCard.component.ts-> basicCard.component.html-> subjects.component.ts-> subjects.component.html-> profileDetails.component. TS-> profileDetails.component.html
在您的app.component中,您缺少路由器插座指令.
@Component({ selector: 'my-app',// you can do somthing like this template: `<card></card> <router-outlet></router-outlet> `,styles: .... directives: [ROUTER_DIRECTIVES] }) export class AppComponent { }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。