Как я могу динамически позиционировать ‹router-outlet› в зависимости от вызываемого URL-адреса?

У меня есть сложный интерфейс, в котором у меня есть список динамических элементов (представьте себе виджет аккордеона) на странице (здесь о странице), и когда я вызываю этот URL:

/about/item/1

он «направляет» к одному из элементов аккордеона и загружает содержимое в выбранный элемент списка (один элемент аккордеона).

В частности, я хочу сделать следующее:

@Component({
    selector: 'app-about',
    template: `
      <ul>
          // dynamic list
          <li>
              <a [routerLink]="['/about/item', 1]">Item 1</a>
              // <router-outlet></router-outlet>
              // if url is /about/item/1
          </li>
          <li>
              <a [routerLink]="['/about/item', 2]">Item 2</a>
              // <router-outlet></router-outlet>
              // if url is /about/item/2
          </li>
      </ul>         
    `
})
export class AboutComponent { }

Я использую angular: 2.0.0-rc.4, angular/router: 3.0.0-beta.2

Это не кажется правильной практикой. Как я могу сделать это «угловым способом»?

Большое спасибо