угловые 2 маршрута пары в данные

Question

У меня есть простой маршрут с 1 параметром:

{ 
    path: 'item/:id', 
    component: ItemComponent, 
    data: {title: 'Item detail'} 
} 

Я устанавливаю заголовок страницы с использованием заголовка данные свойств в главном AppComponent:

export class AppComponent implements OnInit { 
    title: string; 

    ngOnInit() { 
     this.router.events 
     .. parse it 
     .subscribe((event) => { 
       this.title = event['title']; 
     }); 
    } 
} 

Тогда я только отображение в шаблоне AppComponent:

<h1>{{ title }}</h1> 

Проблема заключается в том, если я хочу, чтобы иметь динамический заголовок как "Item detail #name(:id)". Есть ли способ, как я могу добавить, например. route param (: id) или переменная в свойство заголовка данных? Что-то вроде

{ 
    path: 'item/:id', 
    component: ItemComponent, 
    data: {title: 'Item detail #' + :id } 
} 

Answer 1

Как я уже говорил в комментариях, вы можете сохранить data.title параметров как план и заменить динамическую часть внутри компонента.

Маршрут декларации:

{ 
    path: 'item/:id', 
    component: ItemComponent, 
    data: { title: 'Item detail [id]' } 
} 

В data.title я написал [id] сделать замену легче, но не стесняйтесь использовать любые символы, которые Вы хотели бы, чтобы разграничить строку для замены.

Затем в компоненте:

export class AppComponent { 
    title: string; 

    constructor(private route: ActivatedRoute) {} 

    ngOnInit() { 
    const titlePattern = this.route.snapshot.data['title']; 
    const id = this.route.snapshot.params['id']; 
    this.title = titlePattern.replace('[id]', id); 
    } 
}