Question

我的应用程序中有一条名为home的路线，其中有一些内容。问题是这个内容没有显示，它只显示app.component中的菜单。我觉得我错过了一些愚蠢的话，有人可以帮助我吗？这是代码：

这是Home.component：

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

    @Component({
      moduleId: module.id,
      selector: 'home',
      templateUrl: `home.component.html`
    })

    export class HomeComponent{}

App.routing.ts：

import {ModuleWithProviders} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import {HomeComponent} from './home.component'


const appRoutes: Routes = [
    {
        path:'',
        redirectTo: '/',
        pathMatch: 'full'
    },
    {
        path: 'home',
        component: HomeComponent
    },
]

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

app.module.ts：

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent }  from './app.component';
import {HomeComponent} from './home.component';

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent, HomeComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

和theres index.html：

<!DOCTYPE html>
<html>
  <head>
    <title>Angular QuickStart</title>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="css/meu-css.css">
    <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>

    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <script src="systemjs.config.js"></script>
    <script>
      System.import('main.js').catch(function(err){ console.error(err); });
    </script>
  </head>

  <body>
    <base href="/">
    <my-app>Loading AppComponent content here ...</my-app>
  </body>
</html>

Answer 1

我需要确定你的app.component是确定的，但如果我不得不猜测我会说你可能没有

<router-outlet></router-outlet>

在app.component的模板中。 router-outlet告诉路由器在哪里绘制由路径确定的组件。

路线内容未显示

1 个答案: