简体   繁体   English

Angular 2不会从AppComponent移动到起始页面

[英]Angular 2 does not move to start page from AppComponent

I am trying to learn Angular 2 and play with it now. 我正在尝试学习Angular 2并立即使用它。 But I don't know why it doesn't go to start page from AppComponent. 但是我不知道为什么它不能从AppComponent开始页面。 As long as I know, this has to move to test page and show "test" text. 据我所知,这必须转到测试页面并显示“测试”文本。 But when I run this, it only displays "Hello" which is app.component text. 但是,当我运行它时,它仅显示“ Hello”,即app.component文本。 If I enter /test url, there is 404 error. 如果我输入/ test网址,则出现404错误。 Is this because the test component is not loaded successfully? 这是因为测试组件未成功加载吗?

main.ts 主要

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

app.module.ts 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 { }

app.routing.ts 应用程序路由

 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 app.component.ts

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

test.ts 测试

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

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

Include ' <router-outlet></router-outlet> ' in your appcomponent template: 在您的appcomponent模板中包含' <router-outlet></router-outlet> ':

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

It looks like you need to provide a <router-outlet></router-outlet> in your app.component.ts template. 看起来您需要在app.component.ts模板中提供<router-outlet></router-outlet>

So the test component isn't being loaded because it can't inject the component into anything without the <router-outlet> . 因此没有加载测试组件,因为没有<router-outlet>它就无法将组件注入任何东西。

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM