0

Всем привет. Недавно начал работать с 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>

3
  • отформатируйте пожалуйста код - иначе минус поставлю. Проверку сделайте на урл из роутера да и все дела 20 фев 2019 в 17:17
  • А можно подробней? 20 фев 2019 в 19:23
  • инжектите Router сервис, у него есть свойство url, сеттите свойство owl2row: this.router.url.startsWith('/profile') 20 фев 2019 в 19:37

1 ответ 1

0

Router сервис, у него есть свойство url, сеттите свойство owl2row: this.router.url.startsWith('/profile') Это сработало для меня. Спасибо

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.