Angular7：Router-Outlet 附加组件而不是替换它

Question

我尝试了很多解决方案，但没有找到任何解决方案。即使我没有导入 "BrowserAnimationModule" 但两个 html 页面仍然显示在同一页面上。

请帮忙。

根据我的代码，默认组件是 "AppComponent"，另一个是 "TwoComponent"。

下面是代码-

app.component.ts

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

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

}

应用-component.html

<h2>App Component</h2>
<a routerLink="two">TWO</a>
<router-outlet></router-outlet>

第二个组件

two.component.ts

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

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

  constructor() { }

  ngOnInit() {
  }

}

两个.component.html

<p>
  Two Component!
</p>

app.module.ts

import { TwoComponent } from './two/two.component';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { RouterModule } from '@angular/router';


@NgModule({
  declarations: [
    AppComponent,
    TwoComponent
  ],
  imports: [
    RouterModule.forRoot([{ path: 'two', component: TwoComponent }], { useHash: false }),
    BrowserModule,

  ],
  exports: [RouterModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

您已将 router-outlet 添加到 app.component.html，因此第二个组件被添加到 app.component 中，这是预期的行为

如果您有三个组件，例如一个根组件 AppComponent 和两个子组件 OneComponent 和 TwoComponent。

以下是您的解决方案：

app.componnet.html

<h2>App Component</h2>
<a routerLink="one">ONE</a>
<a routerLink="two">TWO</a>
<router-outlet></router-outlet>

app-routing.module.ts

const routes: Routes = [
  {
    path: '',
    component: AppComponent,
    children: [
    {
       path: 'one',
       component:OneComponent,

    },
    {
       path: 'two',
       component:TwoComponent

    },
    {
         path: '',
         redirectTo: 'one',
         pathMatch: 'full',

    },
   ]
  },

  {
    path: '**',
    redirectTo: '/page-not-found'
  }
];

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

one.component.html

<p>
  One Component!
</p>

two.component.html

<p>
  Two Component!
</p>

app.module.ts

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserAnimationsModule,
    AppRoutingModule,
    HttpClientModule,
  ],
  providers: [
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Angular7：Router-Outlet 附加组件而不是替换它

Angular7: Router-Outlet appends component instead of replacing it

angular-routing

angular