单击后退/前进按钮后，Angular 4 <router-outlet>打印两次内容

Question

我遇到了与角度v4.2.4 <router-outlet>的非常奇怪的互动。如下所示，我有两种视图：listing视图和details视图。当我点击详细信息按钮时，我会转到details视图。 listing和details视图并排显示。如果我点击浏览器的后退按钮，details视图会在那里提醒并listing视图重复。

目标是当用户点击详细信息按钮时，属性列表卡会消失。

/ - 在主页上

/ details - 用户点击租赁名单卡上的详细信息按钮后

/ - 用户点击浏览器后面。您可以看到内容已重复。

app.module

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

import { AppRoutingModule } from './app-routing.module';
import { HttpClientModule } from '@angular/common/http';

import { MatToolbarModule, MatCardModule, MatButtonModule, MatIconModule} from '@angular/material';
import { FlexLayoutModule} from "@angular/flex-layout";
import { BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { AgmCoreModule } from '@agm/core';

import { AppComponent } from './app.component';
import { PropertyComponent } from './property/property.component';
import { PropertyService } from './property/property.service';
import { ListingComponent } from './property/listing/listing.component';
import { DetailsComponent } from './property/listing/details/details.component';

@NgModule({
    declarations: [
        AppComponent,
        PropertyComponent,
        ListingComponent,
        DetailsComponent,
    ],
    imports: [
        BrowserModule,
        AppRoutingModule,
        HttpClientModule,
        MatToolbarModule,
        MatCardModule,
        MatButtonModule,
        MatIconModule,
        FlexLayoutModule,
        BrowserAnimationsModule,
        AgmCoreModule.forRoot({
            apiKey: '---'
        })
    ],
    providers: [PropertyService],
    bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

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

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

APP-routing.module

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

import { PropertyComponent } from './property/property.component';
import { ListingComponent } from './property/listing/listing.component';
import { DetailsComponent } from './property/listing/details/details.component';

const routes: Routes = [
    {
        path: '',
        redirectTo: '/',
        pathMatch: 'full'
    },
    {
        path: '',
        component: PropertyComponent,
        children: [
            {
                path: '',
                component: ListingComponent
            },
            {
                path: 'details',
                component: DetailsComponent
            }
        ]
    }
    //{ path: '**', component: PageNotFoundComponent }
];

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

app.component.html

<mat-toolbar color="primary" class="rental__toolbar mat-elevation-z6">
    <span>Rentals</span>
</mat-toolbar>
<main role="main" fxLayout>
    <router-outlet></router-outlet>
</main>

property.component.ts

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

@Component({
    selector: 'app-property',
    templateUrl: './property.component.html',
    styleUrls: ['./property.component.scss'],
    host: { 'class': 'property' }
})
export class PropertyComponent implements OnInit {
    lat: number = 39.9281788;
    lng: number = -75.16583880000002;
    zoom: number = 16;

    constructor() { }

    ngOnInit() {
    }

}

property.component.html

<div fxFlex="70" fxLayout fxFill>
    <agm-map class="property__map" [latitude]="lat" [longitude]="lng" [zoom]="zoom">
        <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
    </agm-map>
</div>
<div class="property__sidenav mat-elevation-z10" fxFlex="30" fxLayout fxFill>
    <router-outlet></router-outlet>
</div>

listing.component.ts

import { Component, OnInit } from '@angular/core';
import { PropertyService } from '../property.service';

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

    properties: any;

    constructor(
        private propertyService: PropertyService
    ) { }

    ngOnInit() {
        this.propertyService.getProperty().subscribe(properties => {
            this.properties = properties;
            console.log(this.properties)
        });
    }

}

listing.component.html

<mat-card class="listing" *ngFor="let property of properties.properties">
    <div class="listing__image">
        <img class="listing__image-background" mat-card-image src="" alt="Photo of a Shiba Inu">
    </div>
    <!--<div class="listing__image">
        <div class="listing__image-background" [style.backgroundImage]="'url('+ property.image[0].url +')'"></div>
    </div>-->
    <mat-card-title>
        {{property.type}} &mdash;
        {{property.price}} / mo.
    </mat-card-title>
    <mat-card-subtitle>
        {{property.address.street}}
        {{property.address.city}}
        {{property.address.state}}
    </mat-card-subtitle>
    <mat-card-content>
        <mat-list fxLayout>
            <mat-list-item fxFlex="20">
                <mat-icon matListIcon>hotel</mat-icon>
                <h4 class="listing__icon-title" matLine>{{property.bed}} beds</h4>
            </mat-list-item>
            <mat-list-item fxFlex="20">
                <mat-icon matListIcon>hot_tub</mat-icon>
                <h4 class="listing__icon-title" matLine>{{property.bath}} bath</h4>
            </mat-list-item>
            <mat-list-item fxFlex="20">
                <mat-icon matListIcon>view_compact</mat-icon>
                <h4 class="listing__icon-title" matLine>{{property.sqft}} sqft.</h4>
            </mat-list-item>
            <mat-list-item fxFlex>
                <mat-icon matListIcon>directions_walk</mat-icon>
                <h4 class="listing__icon-title" matLine>{{property.walkscore}} (Walker's Paradise)</h4>
            </mat-list-item>
        </mat-list>
        <p>{{property.description.short}}</p>
    </mat-card-content>
    <mat-card-actions>
        <button mat-button routerLink="/details">DETAILS</button>
        <button mat-button>SHARE</button>
    </mat-card-actions>
</mat-card>

details.component.ts

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

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

  constructor() { }

  ngOnInit() {
  }

}

details.component.html

<p>
  details works!
</p>