Question

我有一个Angular 2应用程序，默认页面是工具栏。它显示正常，但由于某种原因它显示两次，即两个相同的工具栏在彼此之上。

这是我的app.html代码：

<p-toolbar>
    <div class="ui-toolbar-group-left">
        <button pButton type="button" label="Home" routerLink="/"></button>
    </div>

    <div class="ui-toolbar-group-right">
        <button pButton type="button" label="About" routerLink="/about"></button>
        <i class="fa fa-bars"></i>
        <button pButton type="button" icon="fa-cog" routerLink="/test"></button>
    </div>
</p-toolbar>

<router-outlet></router-outlet>

这是我的app.module.ts文件：

import { AppComponent } from "./components/app.component";
import { AboutComponent } from "./components/about.component";
import { TunerComponent } from "./components/tuner.component";
import { CoreService } from "./services/core.service";

import { routing } from "./app.routes";

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { HttpModule } from "@angular/http";
import { SliderModule } from "primeng/primeng";
import { ButtonModule } from "primeng/primeng";
import { PanelModule } from "primeng/primeng";
import { ToolbarModule } from "primeng/primeng";

@NgModule({
    imports: [
        BrowserModule,
        routing,
        FormsModule,
        HttpModule,
        PanelModule, 
        ToolbarModule, 
        ButtonModule, 
        SliderModule
    ],
    declarations: [
        AppComponent,
        AboutComponent,
        TunerComponent
    ],
    providers: [
        CoreService
    ],
    bootstrap: [
        AppComponent
    ],
})
export class AppModule { }

这是我的app.routes.ts文件：

import { ModuleWithProviders } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";

import { AppComponent } from "./components/app.component";
import { AboutComponent } from "./components/about.component";
import { TunerComponent } from "./components/tuner.component";

const appRoutes: Routes = [
    {
        path: "about",
        component: AboutComponent
    },
    {
        path: "tuner",
        component: TunerComponent
    },
    {
        path: "",
        component: AppComponent,
    }
];

export const appRoutingProviders: any[] = [

];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

这是我的Index.cshtml文件：

<cache vary-by="@Context.Request.Path">
    <app>
        Loading App Content...
    </app>
</cache>

@section scripts {
    <script src="~/vendor.bundle.js"></script> <!-- Vendor Bundle Includes all outside requirments -->
    <script src="~/main.bundle.js"></script> <!-- Includes development code / Angular 2 -->
}

我刚刚从Angular RC4更新到Angular 2.2.4。一切似乎都井然有序，我不确定为什么会这样。

Angular 2 HTML页面显示两次而不是一次

0 个答案: