Angular 运行时带角度的动态路由

我正在angular中创建这个应用程序，用户可以在其中创建存储在db中的房间。用户创建房间后，房间将显示在表格中，任何用户都可以单击已创建的房间打开。我希望链接是动态的。e、 g:myapp.com/rooms/room123。我正在使用“@angular/router”的

import{Routes}

TS

// routerConfig.ts
import { Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { NavbarComponent } from './navbar/navbar.component';
import { HomepageComponent } from './homepage/homepage.component';
import { RoomsComponent } from './rooms/rooms.component';
import { RoommainComponent } from './roommain/roommain.component';

export const appRoutes: Routes = [
  { path: 'home', 
    component: HomepageComponent 
  },
  { path: '',
   component: HomepageComponent },
  {
    path: 'rooms',
    component: RoomsComponent
  },
  {
    /*This will be the component that will render the infomation
    of the room the user has clicked on
    */
    path: 'dyanmicRoom',
    component: RoommainComponent 
  },
];

HTML

  <table class="table">
    <thead class="dark-text blue-grey lighten-5">
      <tr>
        <th class="text-center">Room Name</th>
        <th class="text-center">Date Created</th>
        <th class="text-center">Actions</th>
        <th class="text-center">View Room</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor='let room of roomList' >
        <td class="text-center">{{room.name}}</td>
        <td class="text-center">{{room.timeStamp}}</td>
        <td class="text-center">
            <i class="fa fa-pencil-square-o iconTable orange-text" (click)="onEdit(room)"></i>
            <i class="fa fa-trash-o iconTable red-text text-center" (click)="onDelete(room.$key)"></i>
        </td>
        <td class="text-center">
          <a routerLink="{{room.name}}">View</a>
        </td>
      </tr>
    </tbody>
  </table>

    <router-outlet></router-outlet>


房间名称
创建日期
行动
观景室
{{room.name}
{{room.timeStamp}

像这样使用路径部分-path:rooms/:roomId
请参阅此处-
像这样使用路径部分-path:rooms/:roomId
请参阅此处-
尝试更改为：

{
  path: 'rooms/:id',
  component: RoomsComponent
}

及

视图

其中room.name的值类似于：“room123”
请尝试更改为：

{
  path: 'rooms/:id',
  component: RoomsComponent
}

及

视图

其中room.name的值类似于：“room123”