Форум программистов, компьютерный форум, киберфорум
Anna5194
Войти
Регистрация
Восстановить пароль
Карта форума Блоги Сообщество Поиск Заказать работу  
Рейтинг: 5.00. Голосов: 1.

Маршрутизация

Запись от Anna5194 размещена 25.07.2019 в 10:44

Итак, что я хочу рассказать и показать. Моей задачей было сделать меню. Как оно выглядит, я прикреплю скрин. Нужно было, чтобы при нажатии на "купить" или "аренда" [routerLink] менялся на "/kupit/kvartiru" или "/arenda/kvartiru". Дальше при нажатии и выборе последующих фильтров заполнялась строка [queryParams]. Моей проблемой было то, что [routerLink] сразу же переносит на выбранную страницу, а [queryParams] можно было выбрать только один. Так же была проблема с передачей данный от родительского компонента дочернему. Работаю на Ангуляре 7 с Бутстрапом 4. Решение я сейчас прикреплю ниже. Код родительского элемента:

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
import {Component, OnInit, ViewEncapsulation, Output} from "@angular/core";
import {BasicSaleFlate} from "../entity/BasicSaleFlate";
import {DomSanitizer, Meta, Title} from "@angular/platform-browser";
import {FlatService} from "../buy/flat/flat.service";
import {HttpParams} from "@angular/common/http";
import {RentFlatService} from "../rent/flat/rent.flat.service";
import {BaseFlat} from "../entity/BaseFlat";
import {Routes, RouterModule} from '@angular/router';
 
 
@Component({
  selector: 'home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.less'],
  encapsulation: ViewEncapsulation.None
})
 
export class HomeComponent implements OnInit {
 
  private currentPage: number = 1;
  private pageSize: number = 3;
  flatList: BasicSaleFlate[];
  rentFlatList: BasicSaleFlate[];
  newBuildList: BasicSaleFlate[];
  kupit: any = '';
  arenda: any = '';
  buy: boolean;
  rent: boolean;
 
  constructor(private flatService: FlatService,
              private rentService: RentFlatService,
              private sanitizer: DomSanitizer,
              private _titleService: Title,
              private _metaService: Meta) {
  }
 
  ngOnInit(): void {
 
  }
 
  changeWayKvartiru(a){
    var b;
    switch(a){
      case 1:
          console.log("littlePebble", this.b);
          this.b = "/kupit/kvartiru";
          break;
      case 2:
          console.log("bePrepared", this.b);
          this.b = "/arenda/kvartiru";
          break;
      default:
          console.log("Hi", this.b);
          this.b = "непроканало";
          break;
    }
  }
}
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div class="home-teaser">
    <div class="home-teaser__img"></div>
    <div class="home-teaser__container container">
        <h1 class="home-teaser__title">Купить квартиру в Минске</h1>
        <div class="home-teaser__search search">
            <tabset type="pills">
                <tab 
                heading="Купить"
                (click)="changeWayKvartiru(1)"
                >
                    <data-app-search-buy-flat 
                    [userB]="b">
                    </data-app-search-buy-flat>
                </tab>
                <tab 
                heading="Арендовать"
                (click)="changeWayKvartiru(2)"
                >
                    <data-app-search-buy-flat
                    [userB]="b">
                    </data-app-search-buy-flat>
                </tab>
            </tabset>
        </div>      
    </div>
</div>
А так же код дочернего компонента:
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
import { Component, OnInit, ViewChild, ElementRef, HostListener, NgModule, Output, EventEmitter, Input } from '@angular/core';
import {Routes, RouterModule, Router, ActivatedRoute} from '@angular/router';
import { HttpClient, HttpParams, HttpClientModule } from '@angular/common/http';
import { b } from '@angular/core/src/render3';
 
@Component({
  selector: 'data-app-search-buy-flat',
  templateUrl: './search-buy-flat.component.html',
  styleUrls: ['./search-buy-flat.component.less']
})
 
export class SearchBuyFlatComponent implements OnInit {
  renderer: any;
  orderObj: any;
  
  model = 0;
  numberOfClicks = 0;
  numFrom: string = '';
  numTo: string = '';
 
  qp: any = '';
  qp1: any = '';
  qp2: any = '';
  qp3: any = '';
  qp4: any = '';
  // qp = this.qp1 + this.qp2 + this.qp3;
 
  @Input() userB: string;
  
  byeFlat = [{
    oldBuilding: null,
    newBuilding: null,
    oneRoom: null,
    twoRooms: null,
    threeRooms: null,
    fourPlusRooms: null,
    priceFrom: null,
    priceTo: null,
  }];
 
  rentFlat = [{
    oneRoom: null,
    twoRooms: null,
    threeRooms: null,
    fourPlusRooms: null,
    priceFrom: null,
    priceTo: null,
  }];
 
 
  constructor(
    private _router: Router,
    private http: HttpClient,
    private route: ActivatedRoute,
  ) { }
 
  
 
  ngOnInit() {
 
  }
 
    thisOldBuilding(val){
      this.byeFlat['oldBuilding'] = val;
      console.log("kimiNoNaWa",this.byeFlat[0]);
    }
 
    thisNewBuilding(val){
      this.byeFlat['newBuilding'] = val;
      console.log("kimiNoNaWa",this.byeFlat[1]);
    }
 
    thisBuildingReset(){
      this.byeFlat['oldBuilding'] = null;
      this.byeFlat['newBuilding'] = null;
      console.log("kimiNoNaWa",this.byeFlat[0], this.byeFlat[1]);
    }
 
    changeOneRoom(val){
      this.byeFlat['oneRoom'] = val;
      console.log("kimiNoNaWa",this.byeFlat[2]);
    }
 
    changeTwoRoom(val){
      this.byeFlat['twoRooms'] = val;
      console.log("kimiNoNaWa",this.byeFlat[3]);
    }
 
    changeThreeRoom(val){
      this.byeFlat['threeRooms'] = val;
      console.log("kimiNoNaWa",this.byeFlat[4]);
    }
 
    changeFourPlusRoom(val){
      this.byeFlat['fourPlusRooms'] = val;
      console.log("kimiNoNaWa",this.byeFlat[5]);
    }
    
    thisRoomReset(){
      this.byeFlat['oneRoom'] = null;
      this.byeFlat['twoRooms'] = null;
      this.byeFlat['threeRooms'] = null;
      this.byeFlat['fourPlusRooms'] = null;
      console.log("kimiNoNaWa",this.byeFlat[2],this.byeFlat[3],this.byeFlat[4],this.byeFlat[5]);
    }
 
    priceFrom(numFrom){
      this.byeFlat['priceFrom'] = numFrom;
      console.log("kimiNoNaWa",this.byeFlat[6]);
      // this.qp = {priceFrom: this.numFrom};
      // console.log("something",this.qp);
    }
 
    priceTo(numTo){
      this.byeFlat['priceTo'] = numTo;
      console.log("kimiNoNaWa",this.byeFlat[7]);
      // this.qp = {priceTo: this.numTo};
      // console.log("something",this.qp);
    }
 
 
    // @Output() onChanged = new EventEmitter(); 
    searchRentFlat() {
      // this.qp = this.qp1 + this.qp2;
      this._router.navigate(['/arenda/kvartiru'], { queryParams: HttpParams});
    }
    
    searchBuyFlat() {
      // this.qp = { newBuilding: true};
 
      this._router.navigate(['/kupit/kvartiru'], { queryParams: this.qp});
    }
 }
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<div class="search-block">
    <div class="search-block__content">
       
        
        <div class="search-block__item" dropdown>
            <button id="button-basic" dropdownToggle type="button" class="btn dropdown-toggle"
                    aria-controls="dropdown-basic">
                Тип квартиры
                <span class="caret"></span>
            </button>
            <div *dropdownMenu class="dropdown-menu">
                <p class="dropdown-menu__title">Выберите тип:</p>
 
                <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" [(ngModel)]="model">
                    <label ngbButtonLabel class="btn btn--border" (click)=" thisOldBuilding(true)"
                    id="oldBuilding" #oldBuilding
                    >
 
                        <input ngbButton type="radio" [value]="1" 
                        [(ngModel)]="old"> Вторичка
                    </label>
                    <label ngbButtonLabel class="btn btn--border" (click)="thisNewBuilding(true)"
                    id="newBuilding" #newBuilding
                    >
 
                        <input ngbButton type="radio" value="middle" 
                        
                        [(ngModel)]="new"> Новостройка
                    </label>
                    <label ngbButtonLabel class="btn btn--border" (click)="thisBuildingReset()"
                    >
                        <input ngbButton type="radio" value="2" 
                        id="resetFormBuilding" #resetFormBuilding
                        [(ngModel)]="reset"> Очистить
                    </label>
                </div>
 
 
            </div>
        </div>
        <div class="search-block__item" dropdown>
            <button id="button-basic" dropdownToggle type="button" class="btn dropdown-toggle"
                    aria-controls="dropdown-basic">
                Количество комнат
                <span class="caret"></span>
            </button>
            <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu"
                role="menu" aria-labelledby="button-basic">
 
                <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" [(ngModel)]="model">
                    Выберите количество комнат:
                    <label ngbButtonLabel class="btn btn--border"
                    id="oneRoom" (click)="changeOneRoom(true)">
 
                        <input ngbButton type="checkbox" [value]="1"> 1
                    </label>
                    <label ngbButtonLabel class="btn btn--border"
                    id="twoRooms" (click)="changeTwoRoom(true)">
 
                        <input ngbButton type="checkbox" [value]="2"> 2
                    </label>
                    <label ngbButtonLabel class="btn btn--border"
                    id="threeRooms" (click)="changeThreeRoom(true)">
 
                        <input ngbButton type="checkbox" [value]="3"> 3
                    </label>
                    <label ngbButtonLabel class="btn btn--border"
                    id="fourPlusRooms" (click)="changeFourPlusRoom(true)">
 
                        <input ngbButton type="checkbox" [value]="4"> 4+
                    </label>
                    <label ngbButtonLabel class="btn btn--border" (click)="thisRoomReset()">
                        <input ngbButton type="checkbox" [value]="10" 
                        id="resetFormBuilding" #resetFormBuilding
                        [(ngModel)]="reset"> Очистить
                    </label>
                </div>
            </ul>
        </div>
        <div class="search-block__item">
            <input type="number" [(ngModel)]="numFrom" class="input" placeholder="от"
            (change)="priceFrom(numFrom)">
        </div>
 
        <div class="search-block__item">
            <input type="number" [(ngModel)]="numTo" class="input" placeholder="до"
            (change)="priceTo(numTo)">
        </div>
 
    </div>
    <div>
 
        <button class="search-block__btn btn" 
        [routerLink]="userB" 
        [queryParams]="byeFlat"
        >Поиск</button>
    </div>
</div>
По итогу, все параметры [queryParams] я объединила в массив с изначальным значением null, который меняется на true или число в зависимости от клика или введённых данных. Вместо значения [routerLink] я вставила переменную, которая меняется в зависимости от остановки цикла. Таким образом, благодаря циклу, можно, кроме "купить" и "аренда" добавлять другие кнопки. Решение, по итогу, оказалось действительно простым. Другое дело, что я тупеньки и не смог сам до такого додуматься. Спасибо Роме. В интернете я ничего похожего не нашла, так что пользуйтесь на здоровье :3
Нажмите на изображение для увеличения
Название: Capture2.PNG
Просмотров: 265
Размер:	141.5 Кб
ID:	5488
Размещено в Без категории
Показов 1796 Комментарии 4
Всего комментариев 4
Комментарии
  1. Старый комментарий
    Аватар для 8Observer8
    В TypeScript не принято использовать ключевое слово "var", потому что это пережиток прошлого, оно имеет недостатки по сравнению с "let"

    Поясните, пожалуйста, использование локальной переменной "var b" и "this.b" в коде ниже. Локальная переменная "var b" не инициализирована и не используется, а переменная "this.b" не является полем класса.

    Javascript
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    
    changeWayKvartiru(a){
        var b;
        switch(a){
          case 1:
              console.log("littlePebble", this.b);
              this.b = "/kupit/kvartiru";
              break;
          case 2:
              console.log("bePrepared", this.b);
              this.b = "/arenda/kvartiru";
              break;
          default:
              console.log("Hi", this.b);
              this.b = "непроканало";
              break;
        }
    Запись от 8Observer8 размещена 25.07.2019 в 17:20 8Observer8 вне форума
  2. Старый комментарий
    Аватар для Usaga
    Тихий ужас, да и только) Нет, правда) Я вам настоятельно рекомендую потратить время на изучение такого архитектурного приёма как MVC, а так же такой подход как DTO - Data Transfer Object.

    Всё, что вам было нужно или завести класс с критериями поиска и передать ссылку на него явно при смене рута (DTO) или завести общую для компонентов модель (класс с данными и поведением) и инжектировать его (да, не только сервисы можно инжектировать) во все компоненты, что в такой модели нуждаются.

    Тогда не понадобилась бы вся эта дичь с ручным прописыванием [routerLink] и урлами. Вам самой на это смотреть не больно?

    То, что вы на фронтэнде работаете с динамическим языком вообще никак не отменяет общеизвестные хорошие практики.
    Запись от Usaga размещена 26.07.2019 в 06:53 Usaga вне форума
  3. Старый комментарий
    Аватар для Usaga
    Ещё один момент от которого глазам больно становится: у вас на руках инструмент (TypeScript), что дарует вам статическую типизацию поверх анархии джаваскриптовой. Но вы на это поклали с прибором и работаете как будто на PHP в начале двухтысячных:

    Javascript
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    
      byeFlat = [{
        oldBuilding: null,
        newBuilding: null,
        oneRoom: null,
        twoRooms: null,
        threeRooms: null,
        fourPlusRooms: null,
        priceFrom: null,
        priceTo: null,
      }];
    Javascript
    1
    
    this.byeFlat['newBuilding'] = val;
    Javascript
    1
    
    qp: any = '';
    Запись от Usaga размещена 26.07.2019 в 07:04 Usaga вне форума
  4. Старый комментарий
    Аватар для Fedor92
    Anna5194, а можно фото тимлида Ромы? Героев должны знать в лицо... Мне вот, например, изначально было больно смотреть на наличие console.log в боевом коде, поймут скорее всего не все. Но прочитав комменты парней, отписавших ранее, пожалуй умничать не буду - там итак с горкой...

    P.S. И Вам совет на будущее. Если Вы чего-то не можете реализовать без помощи Ромы ещё не делает Вас "тупенькой" - только лишь неосведомлённой. А также всё, что он Вам подсовывает, даже, если оно работает - совсем не означает, что это правильно. По факту Вы должны осознавать одно, что публикуя код - Вы отдаёте его на суд линча перфекционистам и лучше прислушиваться к тому, что Вам говорят, чем просто игнорировать. Уж не знаю в каких Вы отношениях с Ромой, но мух от котлет надо отделять - иначе не сможете расти, как специалист.
    Запись от Fedor92 размещена 28.07.2019 в 22:29 Fedor92 вне форума
    Обновил(-а) Fedor92 28.07.2019 в 22:30
 
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru