web-dev-qa-db-ja.com

Angular 4ルーティングが機能していません

私はこれについてフローオーバーフローのスタックをチェックしましたが、どれも関連性がないようです。2つのコンポーネント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>

助けてください ！！

angular2-routingangular2-formsangular5
8
Kallam

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>
16
Daniel