Question

我有两个部分，家庭和欢迎。欢迎使用一个按钮，单击该按钮应将我带到“主页”页面。相反，它将URL更新为“ http://localhost:4200/home”，并且不执行其他任何操作。该按钮保持不变，而不是被原始组件内容替换。

app.module.ts

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

import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './app.component';
import { WelcomeComponent } from './pages/welcome/welcome.component';
import { HomeComponent } from './pages/home/home.component';

const appRoutes: Routes = [
  { path: 'welcome', component: WelcomeComponent },
  { path: 'home', component: HomeComponent }
];

@NgModule({
  declarations: [
    AppComponent,
    WelcomeComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(
      appRoutes
    )
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

welcome.ts

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

@Component({
  selector: 'app-welcome',
  templateUrl: './welcome.component.html',
  styleUrls: ['./welcome.component.css']
})
export class WelcomeComponent implements OnInit {

  constructor(private router: Router) { }

  ngOnInit() {
  }

  myFunction() {
    this.router.navigate(['/home'])
  }

}

welcome.html

<button class="btn btn-success" type="button" id="loginButton" (click)="myFunction()">Sign In</button>

home.html

<p>
  home works!
</p>

Answer 1

尝试一下：在app.module.ts中：-

import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { LayoutComponent } from "./layout.component";


const appRoutes: Routes = [{
   path: "",
   component: LayoutComponent,
   children: [{
       path: "",
          redirectTo: "welcome"
    },
    {
       path: "welcome",
          loadChildren: "./welcome/welcome.module#WelcomeModule"(your path)
     },
     {
        path: "home",
          loadChildren: "./home/home.module#HomeModule"(your path)
     }
    }
  ];

在welcome.html

<button class="btn btn-success" type="button" id="loginButton" routerLink="/welcome" [routerLinkActive]="['router-link-active']">Sign In</button>

Answer 2

评论是正确的。添加默认路径和router-outlet标签解决了该问题。

角度路由问题-网址更新，但页面不更新

2 个答案: