Angular 4路由不起作用
Posted
技术标签:
【中文标题】Angular 4路由不起作用【英文标题】:Angular 4 routing not working 【发布时间】:2018-06-17 04:39:35 【问题描述】:我已经检查了堆栈溢出答案,但它们似乎都不相关,我创建了两个组件 page1 和 page2。并在module.ts中声明了一个路由
import BrowserModule from '@angular/platform-browser';
import NgModule from '@angular/core';
import Route, RouterModule from '@angular/router'
import AppComponent from './app.component';
import Page1Component from './page1/page1.component';
import Page2Component from './page2/page2.component';
@NgModule(
declarations: [
AppComponent,
Page1Component,
Page2Component
],
imports: [
BrowserModule,
RouterModule.forRoot([
path:'page1', component:Page1Component,
path:'page2', component:Page2Component
])
],
providers: [],
bootstrap: [AppComponent]
)
export class AppModule
我的page1 html如下
<p>
page1 works!
<button (click)= 'OnbtnClick()'>Route to Page2</button>
</p>
组件ts如下
import Component, OnInit from '@angular/core';
import Router from '@angular/router';
@Component(
selector: 'app-page1',
templateUrl: './page1.component.html',
styleUrls: ['./page1.component.css']
)
export class Page1Component implements OnInit
constructor(private _router:Router)
ngOnInit()
OnbtnClick()
let abc =this._router.navigate(['/page2'])
但点击按钮后,Url 发生变化,但视图不变,appcomponent.html 如下。
<div style="text-align:center">
<h1>
Welcome to SuperHero!
</h1>
</div>
<app-page1></app-page1>
请帮忙!!
【问题讨论】:
路由器插座在哪里? 显示你的 AppComponent.html 最后一个sn-p代码是appComponent.html 【参考方案1】:AppComponent.html 需要有<router-outlet></router-outlet>
指令:
<div style="text-align:center">
<h1>
Welcome to SuperHero!
</h1>
</div>
<-- The view is injected here -->
<router-outlet></router-outlet>
【讨论】:
以上是关于Angular 4路由不起作用的主要内容,如果未能解决你的问题,请参考以下文章