Всем привет. Недавно начал работать с angular и у меня возник вопрос. Есть компонент с массивом "mySlideOptions", в котором находится определенный набор параметров.
import {Component,OnInit} from '@angular/core';
import {TopUploadersService} from './top-uploaders.service'
import {apiRoutes} from '../../app-constants';
import {HelperService} from '../../services/helper.service'
{
selector: 'app-user-list',
templateUrl: './user-list.component.html',
styleUrls: ['./user-list.component.css'
}
export class UserListComponent implements OnInit {
mySlideImages = [1, 2, 3, 4, 5, 6];
mySlideOptions = {
items: 6,
dots: true,
nav: false,
owl2row: true,
margin: 30,
mouseDrag: false,
responsive: {
0: {
items: 2
},
600: {
items: 4
},
1000: {
items: 6
}
}
};
UserImage;
userPhoto: string;
uploaders;
constructor(protected topUploadersService: TopUploadersService, protected helperService: HelperService) {}
ngOnInit() {
this.getTopUploaders();
}
getTopUploaders() {
this.topUploadersService.getTopUploaders().then((resp) => {
this.uploaders = resp;
console.log(this.uploaders);
for (let entry of this.uploaders) {
entry.UserPic = this.ProfilePicPath(entry.UserId);
}
}).catch((err) => {
console.log(err);
})
}
ProfilePicPath(userId) {
this.UserImage = {};
this.UserImage.objectURL = apiRoutes.users.updateUserImage.replace('{UserId}', userId);
return this.getImagePath(this.UserImage);
}
getImagePath(item) {
if (item.objectURL && item.objectURL.indexOf) {
this.userPhoto = item.objectURL;
return this.userPhoto;
}
return item.objectURL;
}
getFormatedPostSize(postSize) {
return this.helperService.getFormatedPostSizeMBtoTB(postSize);
}
}
Хочу выводить этот компонент на двух разных страницах Home и /profile Для страницы profile и всё что будет за ней например /profile/1/2 нужно что бы значение owl2row в этом массиве было true, для остальных страниц false. Подскажите как будет правильнее всего это реализовать. Вывожу так:
<div class="container-fluid user-list" *ngIf="uploaders">
<div class="container">
<h2>Top Uploaders</h2>
<owl-carousel [options]="mySlideOptions" [items]="images" [carouselClasses]="['owl-theme', 'sliding']">
<div class="item" *ngFor="let uploader of uploaders;let i = index">
<div [routerLink]="['/profile', uploader.UserId]" class="user-block">
<div class="img_user"><img src="{{ProfilePicPath(uploader.UserId)}}" alt=""></div>
<div class="info-user">
<p class="name">{{uploader.Username}}</p>
<p class="files"><i class="fas fa-download"></i>{{uploader.UploadedFiles}} Files</p>
<p class="download"><i class="fas fa-paperclip"></i>{{getFormatedPostSize(uploader.UploadedFilesSizeMb)}} </p>
</div>
</div>
</div>
</owl-carousel>
</div>
</div>
Router
сервис, у него есть свойствоurl
, сеттите свойствоowl2row: this.router.url.startsWith('/profile')