angular - Angular 2根据onChange值更改URL和内容

Question

所以，我有一个组件可以实现OnInit基于 API 调用刷新数据。组件是RoomComponent。在那个组件中，我传递events的是一个对象数组。然后在room.component.html我渲染下拉列表中包含event.url. 我想在下拉值更改时更改 URL 和内容。

但是这个时候，我只能更改URL，不能更改内容（我仍然不知道如何实现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>