angular - URL 发生变化，但组件未在 Angular 导航中呈现

Question

我正在尝试通过 Angular 应用程序中的按钮单击来通过简单组件进行路由 我可以看到 url 路径正在更改，但组件 View 中的内容未呈现。 我使用路由模块创建了应用程序(app-routing.module.ts) 我正在尝试通过按钮从 app.component.html 导航到名为 one 、two 的组件。

app.component.ts:

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'tan';

  constructor(private router: Router) { }  

    openOne(){
      this.router.navigate(['/one']);
      console.log("inside gotopath func")
    
    }
    openTwo(){
      this.router.navigate(['/two']);
      console.log("inside gotopath func")
    
    }

  
}

app.component.html

<button (click)="openOne()">ONE</button>     
<button (click)="openTwo()">TWO</button>      

应用程序路由.module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { OneComponent } from './one/one.component';
import { TwoComponent } from './two/two.component';

const routes: Routes = [ { path: 'one', component: OneComponent},{ path: 'two', component: TwoComponent}];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { OneComponent } from './one/one.component';
import { TwoComponent } from './two/two.component';

@NgModule({
  declarations: [
    AppComponent,
    OneComponent,
    TwoComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  exports:[AppRoutingModule,RouterModule]
})
export class AppModule { }

one.component.html:

<p>one works!</p>

two.component.html

<p>two works!</p>

1st page with buttons to navigate

点击一个按钮后

after clicking ONE button

点击两个按钮后 after clicking TWO button

将鼠标悬停在按钮上时，它不会在左下角显示 url 路径。 我尝试删除所有 chrome 扩展， 按照堆栈溢出中的建议，在开发工具设置中禁用“启用 Javascript 源映射”和“启用 css 源映射”。

一段时间后我收到此错误:

error

之前我经常遇到这样的错误: 未捕获( promise 中)错误:监听器通过返回 true 指示异步响应，但消息 channel 在收到响应之前关闭。

还有这个:

[webpack-dev-server] 已断开连接!

error after sometime

请帮我解决这个问题，我已经尝试了很多天了:(

Answer 1

如果希望内容根据当前路由动态变化，那么需要添加Router Outlet在您的根组件中(在您的情况下，根组件是 app.component )。例如:

app.component.ts

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
}

app.component.html

<!-- app.component.html -->
<!-- Display content for current route -->
<router-outlet></router-outlet>

请注意，您不应将重定向到其他组件(或任何其他 HTML)的按钮放置在根组件 (app.component.html) 内。相反，创建一个新组件(例如 ParentComponent)，它将显示您所需的按钮。

parent.component.ts

// parent.component.ts
import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {
  constructor(private router: Router) {}

  openOne(){
    console.log("inside openOne func");
    this.router.navigate(['/one']);
  
  }
  openTwo(){
    console.log("inside openTwo func");
    this.router.navigate(['/two']);
  
  }
}

parent.component.html

<!-- parent.component.html -->
<button (click)="openOne()">ONE</button>     
<button (click)="openTwo()">TWO</button>

现在转到您的路由模块并设置此父组件的默认路径。

app-routing.module.ts

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { OneComponent } from './one/one.component';
import { TwoComponent } from './two/two.component';
import { ParentComponent } from './parent/parent.component';

const routes: Routes = [
  { path: '', component: ParentComponent },
  { path: 'one', component: OneComponent},
  { path: 'two', component: TwoComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: []
})
export class AppRoutingModule { }