如何在 angular 中布線而不顯示兩個組件

Question

我正在嘗試使用 Angulars 路由器通過單擊登陸頁面上的按鈕從我的登陸組件路由到我的“事件”組件。 單擊此按鈕后，我只想顯示事件組件，但是當我單擊按鈕（或 URL 末尾的 append “/events”）時，事件組件顯示在登陸組件下方，同時顯示兩個組件。

app.component.html：

<app-landing></app-landing>

登陸.component.html：

<div class="landing-container">
  <div class="landing-search">
    <p> selected city: {{ selectedCity }}</p>
    <button mat-raised-button color="secondary" (click)="getCombinedResponses()"><a routerLink="/events">Search</a></button>
  </div>
</div>
<router-outlet></router-outlet>

應用程序路由.module.ts：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LandingComponent } from './landing/landing.component';
import { VenueCardsComponent } from './venues/venues.component';

const appRoutes: Routes = [
  { path: 'events', component: VenueCardsComponent }
];

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

Answer 1

在您的情況下，您的路由器出口需要位於 app.component.html 中，並且您還需要為着陸頁設置路由。

app.component.html：

<router-outlet></router-outlet>

登陸.component.html：

<div class="landing-container">
  <div class="landing-search">
    <p> selected city: {{ selectedCity }}</p>
    <button mat-raised-button color="secondary" (click)="getCombinedResponses()"><a routerLink="/events">Search</a></button>
  </div>
</div>

應用程序路由.module.ts：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LandingComponent } from './landing/landing.component';
import { VenueCardsComponent } from './venues/venues.component';

const appRoutes: Routes = [
  { path: '', component: LandingComponent },
  { path: 'events', component: VenueCardsComponent }
];

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