为什么我的文件app.component.html没有在Angular7中显示路由?

时间:2019-03-02 14:26:29

标签: javascript npm angular7 typescript2.0

我像这样在Angular 7中使用了app.component.html中的代码

    <div id="wrapper">

    <header id="header-container" class="fullwidth">

    <div id="header">
    <div class="container">

        <div class="left-side">

                <div id="logo">
                <a href="index.html"><img src="images/logo.png" alt=""></a>
                </div>
                <nav id="navigation">
                <ul id="responsive">

                    <li><a [routerLink]="/Home" class="current">Home</a></li>
                    <li><a [routerLink]="/Projects">Projects</a>
                    <ul class="dropdown-nav">
                        <li><a href="#">Post Project</a></li>
                </ul>
                </nav>

            </div>


            <div class="right-side">

                <div class="header-widget hide-on-mobile">

                    <div class="header-notifications">

                        <div class="header-notifications-trigger">
                            <a href="#"><i class="icon-feather-bell"></i><span>4</span></a>
                        </div>

                        <div class="header-notifications-dropdown">

                            <div class="header-notifications-headline">
                                <h4>Notifications</h4>
                                <button class="mark-as-read ripple-effect-dark" title="Mark all as read" data-tippy-placement="left">
                                    <i class="icon-feather-check-square"></i>
                                </button>
                            </div>

                            <div class="header-notifications-content">
                                <div class="header-notifications-scroll" data-simplebar>
                                    <ul>
                                        <li class="notifications-not-read">
                                            <a href="dashboard-manage-candidates.html">
                                                <span class="notification-icon"><i class="icon-material-outline-group"></i></span>
                                                <span class="notification-text">
                                                    <strong>Michael Shannah</strong> applied for a job <span class="color">Full Stack Software Engineer</span>
                                                </span>
                                            </a>
                                        </li>

                                        <li>
                                            <a href="dashboard-manage-bidders.html">
                                                <span class="notification-icon"><i class=" icon-material-outline-gavel"></i></span>
                                                <span class="notification-text">
                                                    <strong>Gilbert Allanis</strong> placed a bid on your <span class="color">iOS App Development</span> project
                                                </span>
                                            </a>
                                        </li>

                                        <li>
                                            <a href="dashboard-manage-jobs.html">
                                                <span class="notification-icon"><i class="icon-material-outline-autorenew"></i></span>
                                                <span class="notification-text">
                                                    Your job listing <span class="color">Full Stack PHP Developer</span> is expiring.
                                                </span>
                                            </a>
                                        </li>

                                        <li>
                                            <a href="dashboard-manage-candidates.html">
                                                <span class="notification-icon"><i class="icon-material-outline-group"></i></span>
                                                <span class="notification-text">
                                                    <strong>Sindy Forrest</strong> applied for a job <span class="color">Full Stack Software Engineer</span>
                                                </span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>

                        </div>

                    </div>

                    <div class="header-notifications">
                        <div class="header-notifications-trigger">
                            <a href="#"><i class="icon-feather-mail"></i><span>3</span></a>
                        </div>

                        <div class="header-notifications-dropdown">

                            <div class="header-notifications-headline">
                                <h4>Messages</h4>
                                <button class="mark-as-read ripple-effect-dark" title="Mark all as read" data-tippy-placement="left">
                                    <i class="icon-feather-check-square"></i>
                                </button>
                            </div>

                            <div class="header-notifications-content">
                                <div class="header-notifications-scroll" data-simplebar>
                                    <ul>
                                        <li class="notifications-not-read">
                                            <a href="dashboard-messages.html">
                                                <span class="notification-avatar status-online"><img src="assets/images/user-avatar-small-03.jpg" alt=""></span>
                                                <div class="notification-text">
                                                    <strong>David Peterson</strong>
                                                    <p class="notification-msg-text">Thanks for reaching out. I'm quite busy right now on many...</p>
                                                    <span class="color">4 hours ago</span>
                                                </div>
                                            </a>
                                        </li>

                                        <li class="notifications-not-read">
                                            <a href="dashboard-messages.html">
                                                <span class="notification-avatar status-offline"><img src="assets/images/user-avatar-small-02.jpg" alt=""></span>
                                                <div class="notification-text">
                                                    <strong>Sindy Forest</strong>
                                                    <p class="notification-msg-text">Hi Tom! Hate to break it to you, but I'm actually on vacation until...</p>
                                                    <span class="color">Yesterday</span>
                                                </div>
                                            </a>
                                        </li>

                                        <li class="notifications-not-read">
                                            <a href="dashboard-messages.html">
                                                <span class="notification-avatar status-online"><img src="assets/images/user-avatar-placeholder.png" alt=""></span>
                                                <div class="notification-text">
                                                    <strong>Marcin Kowalski</strong>
                                                    <p class="notification-msg-text">I received payment. Thanks for cooperation!</p>
                                                    <span class="color">Yesterday</span>
                                                </div>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>

                            <a href="dashboard-messages.html" class="header-notifications-button ripple-effect button-sliding-icon">View All Messages<i class="icon-material-outline-arrow-right-alt"></i></a>
                        </div>
                    </div>

                </div>

                <div class="header-widget">

                    <div class="header-notifications user-menu">
                        <div class="header-notifications-trigger">
                            <a href="#"><div class="user-avatar status-online"><img src="assets/images/user-avatar-small-01.jpg" alt=""></div></a>
                        </div>

                        <div class="header-notifications-dropdown">

                            <div class="user-status">

                                <div class="user-details">
                                    <div class="user-avatar status-online"><img src="assets/images/user-avatar-small-01.jpg" alt=""></div>
                                    <div class="user-name">
                                        Tom Smith <span>Freelancer</span>
                                    </div>
                                </div>

                                <div class="status-switch" id="snackbar-user-status">
                                    <label class="user-online current-status">Online</label>
                                    <label class="user-invisible">Invisible</label>
                                    <span class="status-indicator" aria-hidden="true"></span>
                                </div>  
                        </div>

                        <ul class="user-menu-small-nav">
                            <li><a href="dashboard.html"><i class="icon-material-outline-dashboard"></i> Dashboard</a></li>
                            <li><a href="dashboard-settings.html"><i class="icon-material-outline-settings"></i> Settings</a></li>
                            <li><a href="index-logged-out.html"><i class="icon-material-outline-power-settings-new"></i> Logout</a></li>
                        </ul>

                        </div>
                    </div>

                </div>

                <span class="mmenu-trigger">
                    <button class="hamburger hamburger--collapse" type="button">
                        <span class="hamburger-box">
                            <span class="hamburger-inner"></span>
                        </span>
                    </button>
                </span>

            </div>

        </div>
        </div>

    </header>
    <!-- Header Container / End -->
    <router-outlet>
    </router-outlet>
    <app-messages></app-messages>

app.module.ts中,我们有

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { RouterModule, Routes } from '@angular/router';
    import { AppComponent } from './app.component';
    import { ProjectsComponent } from './submenu/projects.component';
    import { FreelancerComponent } from './submenu/freelancer.component';
    import { LoginComponent } from './user/signin/login.component';
    import { LogoutComponent } from './user/signout/logout.component';
    import { HomeComponent } from './home/home.component';

    const routes: Routes = [
      { path: 'projects', component: ProjectsComponent },
      { path: 'home', component: HomeComponent },
      { path: '', redirectTo: '/home', pathMatch: 'full' }
    ];

    @NgModule({
      declarations: [
        AppComponent,
        LoginComponent,
        LogoutComponent,
        HomeComponent
      ],
      imports: [
        BrowserModule,
        RouterModule.forRoot(routes)
      ],
      exports: [ RouterModule ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

app-routing.module.ts

    import { NgModule } from '@angular/core';
    import { RouterModule, Routes } from '@angular/router';
    import { ProjectsComponent } from './submenu/Projects.component'; 
    import { HomeComponent } from './home/Home.component'; 

    const routes: Routes = [
          { path: '', redirectTo:'/home', pathMatch: 'full'},
          { path: 'home', component: HomeComponent },
          { path: 'projects', component: ProjectsComponent }
    ];

    export const RoutesProvider = RouterModule.forRoot(routes);
    export class AppRoutingModule { }

一个空白屏幕代替了导航菜单。

Picture showing blank screen in space of navigation menus

我在阅读本文后写了这个问题

Why my file app.component.html is not working?

希望你明白我的意思。请帮助我,因为这会导致角度7出现严重问题。

我是一个尝试使用代码的Angular Developer。

1 个答案:

答案 0 :(得分:0)

可能有多种原因。

让我们开始:未声明您的ProjectsComponent

 @NgModule({
      declarations: [
        AppComponent,
        LoginComponent,
        LogoutComponent,
        HomeComponent,
        ProjectsComponent
      ],