我已经检查了关于此问题的堆栈溢出答案,但是它们似乎都不相关,我创建了两个组件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需要具有<router-outlet></router-outlet>
指令:
<div style="text-align:center">
<h1>
Welcome to SuperHero!
</h1>
</div>
<-- The view is injected here -->
<router-outlet></router-outlet>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句