Question

我正在尝试在我的应用程序中使用路由器，使用路由器版本3.0.0-beta.1，应用程序正在运行，但是当我点击“下一步”时， subjects.component.html中的按钮我期待获得＆＃39; profileDetails.component.html＆＃39;的内容。我创造了一个笨蛋，例如。在这里：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-＆gt; basicCard.component.ts-＆gt; basicCard.component.html-＆gt; subjects.component.ts-＆gt; subjects.component.html-＆gt; profileDetails .component.ts-＆GT; profileDetails.component.html

Answer 1

在您的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 {

}

plunker

错误：无法找到要加载的主要插座＆＃39; ProfileDetailsComponent＆＃39;

1 个答案: