0

Angular2 開発者の皆様、こんにちは。

ここに私が直面している課題があり、それを解決する方法がわかりません。

次のような app.component.ts ファイルがあります。

import { Component } from '@angular/core';
import {ROUTER_DIRECTIVES} from '@angular/router';

import { LeftMenuComponent } from './left-menu.component';
import {HeaderComponent} from './header.component';
import {TotalContainer} from './container-total.component';

@Component({
  selector: 'my-app',
  template: `
    <myheader [display]="display"></myheader>
    <router-outlet></router-outlet>
  `,
  directives:[HeaderComponent,TotalContainer,ROUTER_DIRECTIVES]
})
export class AppComponent { 
    display = true;
}

ヘッダーのすべてのビューを header.component に記述し、HTML にロードしました。「header.component」では、「left-menu.component」をロードしています。left-menu.component には、「app.component」にロードされるハイパーリンクがあります。

「ルーターのプロバイダーがありません」というエラーが表示されます。

angular.io サンプルに基づいて続行しましたが、解決できませんでした。

これが私がコードを書いた方法です。header.component.ts

import {Component, Input} from '@angular/core';
import {ROUTER_DIRECTIVES} from '@angular/router';

import {LeftMenuComponent} from './left-menu.component';

@Component({
    selector:'myheader',
    template:`
        <nav class="navbar navbar-default">
            <div>
             ....
            </div>
        </nav>
        <left-menu [class.disp]="display"></left-menu>

    `,
    directives:[ROUTER_DIRECTIVES, LeftMenuComponent]
})
export class HeaderComponent{
    @Input() display;
}

left-menu.component.ts

import {Component} from '@angular/core';
import {ROUTER_DIRECTIVES} from '@angular/router';

import {KeyEventsPlugin} from '@angular/platform-browser/src/dom/events/key_events';

@Component({
    selector:'left-menu',
    template:`
        <ul class="list-group">
            <li class="list-group-item">
                <span class="glyphicon glyphicon-share-alt"></span>
                <span class="badge">14</span>
                    <a [routerLink]="['/followups']" routerLinkActive="active-link">Follow Ups</a>
            </li>
        </ul>
    `,
    directives:[ROUTER_DIRECTIVES]
})
export class LeftMenuComponent{

}

app.routes.ts

import { provideRouter, RouterConfig }  from '@angular/router';
import {FollowUpsComponent} from '../components/followups.component';
import {TotalContainer} from '../components/container-total.component';

const routes: RouterConfig = [
    {
        path:'total-container',
        component:TotalContainer
    },
    {
        path:'followups',
        component: FollowUpsComponent,
    },
    {
        path:'',
        redirectTo:'/total-container',
        pathMatch:'full'
    },
    {
        path:'**',
        redirectTo:'/total-container'
    }
];


export const appRouterProviders = [
    provideRouter(routes)
];

main.ts

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './components/app.component';

import { appRouterProviders } from './routes/app.routes'; 
bootstrap(AppComponent,[
    appRouterProviders
]); 

bootstrap(AppComponent);

誰でもこれで私を助けることができます.a

4

1 に答える 1

4

main.ts で、誤って 2 回ブートストラップを呼び出しているようです:

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './components/app.component';

import { appRouterProviders } from './routes/app.routes'; 
bootstrap(AppComponent,[
    appRouterProviders
]); 

bootstrap(AppComponent); <-----delete this!

2番目のものを削除すると、準備完了です

于 2016-08-09T04:25:31.757 に答える