Angular 2不會從AppComponent移動到起始頁面

Question

我正在嘗試學習Angular 2並立即使用它。 但是我不知道為什么它不能從AppComponent開始頁面。 據我所知，這必須轉到測試頁面並顯示“測試”文本。 但是，當我運行它時，它僅顯示“ Hello”，即app.component文本。 如果我輸入/ test網址，則出現404錯誤。 這是因為測試組件未成功加載嗎？

主要

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { AppModule } from './app/app.module';
 platformBrowserDynamic().bootstrapModule(AppModule);

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { routing } from './app.routing';
import { test } from './test';
@NgModule({
    imports: [
        BrowserModule,
        routing
    ],
    declarations: [
        AppComponent,
        test
    ],
    providers: [
    ],
    bootstrap:    [ AppComponent ]
})
export class AppModule { }

應用程序路由

 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { test } from './test.index';
 const routes: Routes = [
     { path: '', component: test },
     { path: 'test', component: test },
     { path: '**', redirectTo: '' },
 ];

 export const routing = RouterModule.forRoot(routes);

app.component.ts

  import { Component } from '@angular/core';
    @Component({
      selector: 'my-app',
      template: `<h1>Hello </h1>`,
    })
    export class AppComponent  {  }

測試

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

@Component({
    selector: 'test-app',
    template: `<h1>test </h1>`,
})
export class test {}

Answer 1

在您的appcomponent模板中包含' <router-outlet></router-outlet> '：

 <div>
      <h3>App component</h3>
    </div>
    <div>
      <router-outlet></router-outlet>
    </div>

Answer 2

看起來您需要在app.component.ts模板中提供<router-outlet></router-outlet> 。

因此沒有加載測試組件，因為沒有<router-outlet>它就無法將組件注入任何東西。

https://angular.io/tutorial/toh-pt5#add-router插座