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

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

Показов 2069 Комментарии 4

Итак, что я хочу рассказать и показать. Моей задачей было сделать меню. Как оно выглядит, я прикреплю скрин. Нужно было, чтобы при нажатии на "купить" или "аренда" [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
Просмотров: 442
Размер: 141.5 Кб
ID: 5488

Размещено в Без категории

« как скачать любое изображение с любого сайта Главная страница Как сделать, чтобы раскрывающийся список НЕ закрывался »

Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.

Всего комментариев 4

Комментарии

В 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 вне форума

Тихий ужас, да и только) Нет, правда) Я вам настоятельно рекомендую потратить время на изучение такого архитектурного приёма как MVC, а так же такой подход как DTO - Data Transfer Object.

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

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

То, что вы на фронтэнде работаете с динамическим языком вообще никак не отменяет общеизвестные хорошие практики.

Запись от Usaga размещена 26.07.2019 в 06:53 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 на форуме

Anna5194, а можно фото тимлида Ромы? Героев должны знать в лицо...

Мне вот, например, изначально было больно смотреть на наличие console.log в боевом коде, поймут скорее всего не все. Но прочитав комменты парней, отписавших ранее, пожалуй умничать не буду - там итак с горкой...

P.S. И Вам совет на будущее. Если Вы чего-то не можете реализовать без помощи Ромы ещё не делает Вас "тупенькой" - только лишь неосведомлённой. А также всё, что он Вам подсовывает, даже, если оно работает - совсем не означает, что это правильно. По факту Вы должны осознавать одно, что публикуя код - Вы отдаёте его на суд линча перфекционистам и лучше прислушиваться к тому, что Вам говорят, чем просто игнорировать. Уж не знаю в каких Вы отношениях с Ромой, но мух от котлет надо отделять - иначе не сможете расти, как специалист.

Запись от Fedor92 размещена 28.07.2019 в 22:29 Fedor92 вне форума

Новые блоги и статьи Все статьи Все блоги /
Мобильное приложение ColorStep pavlinmavlin 17.09.2026 Реализовал приложение Красный, Зеленый, Синий в Unity3d + c#. Название изменил на ColorStep. Приложение прошло модерацию и теперь доступно для скачивания. Делал его сам, шаг за шагом — и вот,. . .	Запрет дублирования строк в табличной части Maks 13.09.2026 Реализация из решения ниже выполнена на нетиповом справочнике "Нормы ТО" с табличной часть "Виды ТО", разработанного в КА2, со следующими реквизитами: - ВидТО (СправочникСсылка. ВидыТО); - ВидГСМ. . .	Скрипты Tampermonkey для CyberForum, ChatGPT, Claude и пр. Jin X 06.09.2026 Скрипты Tampermonkey для CyberForum, ChatGPT, Claude и пр. Работая с форумом и нейросетями в браузере часто хочется что-то подкорректировать или добавить какого-то функционала. Ниже прикреплён. . .	Программа опроса у.з. расходомера SLS-720F Argus19 02.09.2026 Программа опроса у. з. расходомера SLS-720F Программа опрашивает один раз в минуту три ультразвуковых расходомера SLS-720F через интерфейс RS-485 по протоколу Modbus RTU. Опрашиваются регистры. . .
Hyper-V: Компьютер должен поддерживать доверенный платформенный модуль 2.0. Maks 31.08.2026 При установке Windows 11 на виртуальную машину Hyper-V 2-го поколения вылезла такая ошибка: Решение: в параметрах виртуальной машины, в разделе "Безопасность" (Security) активировать флаг. . .	Архитектура биовида Стива в Майнкрафте: Зачем бонобо кубический каннибализм anaschu 30.08.2026 Кубический Вагинокапитализм в Minecraft: Математический инвариант ОДУ и рок Стивов-бонобо Главная задача разработанной «Модели Всего» — наглядно продемонстрировать наличие системной «судьбы». . .	Оттачиваю умение писать js программы. russiannick 30.08.2026 Проектом выходного дня стало написание Книги шифров Виженера. Итогом стала версия 200, синий туман. Синий туман назван так, потому что замораживает текст под собой. Нажатие синих кнопок управляют. . .	мат медиц модель 30. презентация проекта anaschu 27.08.2026 хоп хоп хоп хидахоп, а я кладую))

Сообщение форума

Отменить изменения