[英]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.