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 需要有&lt;router-outlet&gt;&lt;/router-outlet&gt; 指令:

<div style="text-align:center">
  <h1>
    Welcome to SuperHero!
  </h1>
</div>

<-- The view is injected here -->
<router-outlet></router-outlet>

【讨论】:

以上是关于Angular 4路由不起作用的主要内容,如果未能解决你的问题,请参考以下文章

角度简单路由不起作用

Angular 8嵌套路由和多个路由器插座不起作用

Angular 6子路由不起作用

Angular 11,js在角度路由后不起作用

Angular 6 路由器过渡动画不起作用(导航栏)

Angular 11 路由在 AWS S3 和 Cloudfront 中不起作用