Angular 2更改URL＆amp;基于onChange值的内容

Question

所以，我有一个实现OnInit的组件来刷新基于API调用的数据。该组件是RoomComponent。在该组件中，我传递了events，它是一个对象数组。然后在room.component.html中，我将下拉列表包含在event.url中。我想更改网址＆amp;下拉值更改时的内容。

但此时，我只能更改网址，而不是内容（我仍然不知道如何一起实现OnInit和OnChange）。以下是room.component.ts：

的一些代码

import { Component, OnInit } from '@angular/core';
import { OnChanges, SimpleChanges, Input } from '@angular/core';
import { GlobalVariableService } from '../_service/globalVariableService';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { NgForm } from '@angular/forms';
import { CookieService } from 'ngx-cookie-service';

import { CrowdService } from '../_service/crowdService';
import { RoomService } from '../_service/roomService';
import { EventService } from '../_service/eventService';

import * as moment from 'moment';
import * as io from 'socket.io-client';

interface roomResponse {
    status: number;
    message: Array<{string}>;
}
@Component({
  selector: 'app-room',
  providers: [RoomService, CrowdService, EventService],
  templateUrl: './room.component.html',
  styleUrls: ['./room.component.css', '../app.component.css', '../css/room.css']
})
export class RoomComponent implements OnInit {
    isCopied: boolean = false;

  constructor(
        private globalVariableService: GlobalVariableService,
        private router: Router,
        private route: ActivatedRoute,
        private roomService: RoomService,
        private modalService: NgbModal,
        private crowdService: CrowdService,
        private eventService : EventService,
        private cookieService: CookieService
    ) {

    }

    events = [];
    rooms = [];
    eventId = 0;
    eventUrl = '';
    eventName = "Loading ...";

    // onchange
    switchEvent = '';

    // notif
    added = true;
    edited = true;
    deleted = true;
    notAllowed = true;

    onChange(value){
        this.router.navigateByUrl('/event/' + value + '/room-management');
        console.log(value);
    }

    ngOnInit() {
        var self = this;
        this.route.params.subscribe(function (params: Params) {
              self.eventUrl = params['eventUrl'];
        })
        this.refresh();
        this.refreshEventData();
        this.showEditDeleteShare();
    }


    refreshEventData() {
        var self = this;
        this.eventService.getEvent(this.eventUrl).subscribe(function(data: any) {
            self.eventName = data.message[0].name;
        })
    }

    refresh() {
        var self = this;
        self.closeSocket();
            var url = this.router.url;
            url = url.split('/')[2];
            var eventUrl = url;
            self.roomService.getRooms(eventUrl, 'all').subscribe(function(data: any) {
                self.rooms = data.message;
                for (var i = 0; i < self.rooms.length; ++i) {
                self.rooms[i].open_date = moment(self.rooms[i].open_gate).format('D MMM YY');
                self.rooms[i].open_time = moment(self.rooms[i].open_gate).format('hh:mm');
                self.rooms[i].close_date = moment(self.rooms[i].close_gate).format('D MMM YY');
                self.rooms[i].close_time = moment(self.rooms[i].close_gate).format('hh:mm');
                self.getRoomCurrent(self.rooms[i]);
            }
        }, function(error) {
            console.log(`an error occured, ${error}`);
        })
    }

}

这是来自room.component.html的一些代码，用于显示下拉值：

<div class="event-selection">
            <div class="form-group">
                <label >Switch to event : </label>
                <select [(ngModel)]="selectedEvent" (ngModelChange)="onChange($event)" required class="form-control">
                    <option *ngFor="let event of events" value="{{event.short_url}}">
                        {{event.name}}
                    </option>
                </select>
            </div>
        </div>