Блог

У меня есть статический файл.config с некоторыми данными, которые необходимо отобразить в компоненте в одностраничном приложении. Модель для данных является согласованной (одни и те же ключи, но разные значения для каждого объекта), но в зависимости от URL-адреса, значения должны меняться для отображения данных, относящихся к текущей «странице».

 export const data = {
setOne: {
    industryId: 'set-one',
    industryName: 'Set One',
    firstPoint: 'lorum',
    secondPoint: ' Ipsum',
    thirdPoint: 'lorum',
    videoContent: ['https://www.youtube.com', 'https://www.youtube.com']
},
setTwo: {
    industryId: 'set-two',
    industryName: 'Set two',
    firstPoint: 'lorum',
    secondPoint: ' Ipsum',
    thirdPoint: 'lorum',
    videoContent: ['https://www.youtube.com', 'https://www.youtube.com']
},
setThree: {
    industryId: 'set-three',
    industryName: 'Set three',
    firstPoint: 'lorum',
    secondPoint: ' Ipsum',
    thirdPoint: 'lorum',
    videoContent: ['https://www.youtube.com', 'https://www.youtube.com']
},
  

};

Итак www.site.com/set-one должны отображаться значения в setOne и т.д..

Есть ли способ инициировать отображение разных значений в шаблоне HTML при изменении URL-адреса?

Я новичок в Angular и все еще разбираюсь в JavaScript, поэтому прошу прощения, если я пропустил какую-либо важную информацию.

Использование

 import { data } from '../config';

constructor(
    private router: Router
  ) {}

ngOnInit() {
 this.router.events
    .subscribe(event =>{
      if(event instanceof NavigationEnd) {
        const path = event.url.split('/').pop();
        switch(path) {
           case 'set-one':
              console.log(data['setOne']);
            break;
        }
      }
    })
}