history.scrollRestoration = 'manual';history.pushState({popup: true, scrollTop: 0}, 'popup');
Этот код не работает. Совсем.
test: function() { _.debounce(function() { console.log('test222'); }, 500); }
test: _.debounce(function() {
console.log('test222');
}, 500)
<div id="app"></div>
slick-slide у предков целевого элемента, номер слайда можно определить через атрибут data-slick-index (или можете назначать слайдам какие-то свои классы/атрибуты для выяснения, где был произведён клик).
Object.entries(props).filter(n => n[1]).map(n => n[0]).join(',')
// или
`${Object.entries(props).reduce((acc, [ k, v ]) => (v && acc.push(k), acc), [])}`
// или
Object.entries(props).map(n => n[1] && n[0]).filter(Boolean).toString()
// или
'' + Object.keys(props).reduce((acc, n) => props[n] ? [ ...acc, n ] : acc, [])
// или
String(Object.keys(props).filter(n => props[n]))
import { Component, EventEmitter, Output } from '@angular/core';
@Component({
selector: 'search',
templateUrl: './result.component.html',
styleUrls: ['./result.component.scss']
})
export class SearchComponent {
public query: string;
@Output() onQuery: EventEmitter<string> = new EventEmitter();
constructor() {}
public handlerEnterSearch() {
this.onQuery.emit(this.query)
}
}<div class="input-group input-group-lg p-5">
<input
[(ngModel)]="query"
type="text"
class="form-control"
placeholder="Что ищем?"
(keyup.enter)="handlerEnterSearch()"
>
<div class="input-group-append">
<button class="btn btn-primary" type="button" (click)="handlerEnterSearch()">Найти фильм</button>
</div>
</div>import { Component, OnInit, Input } from '@angular/core';
import { HttpService } from '../http.service'
@Component({
selector: 'result',
templateUrl: './result.component.html',
styleUrls: ['./result.component.scss']
})
export class ResultComponent implements OnInit {
// Вот эти items выводятся в html результата
@Input()
items: any[];
constructor(){}
}<search (onQuery)="doSearch($event)">
<result [items]="result">import { Component, OnInit } from '@angular/core';
import { HttpService } from '../http.service'
@Component({
selector: 'search-result',
templateUrl: './search-result.component.html',
styleUrls: ['./search-result.component.scss']
})
export class SearchResultComponent implements OnInit {
items:any[];
constructor(private httpService: HttpService){
}
// Вот это неудачная часть. Её можно сделать веселее, но для этого необходимо понимать как устроен RxJS.
// Я не знаю как это объяснить без написания отдельной статьи.
// На первое время такой подход сойдёт.
doSearch(query: string) {
this.httpService.getFilms(query).subscribe((items) => {
this.items = items;
})
}
}
search(title: string): void {
const params = new HttpParams()
.set('api_key', 'd6a5ac2d3d7cab11a084ca8080421b20')
.set('title', title);
const url = 'https://api.themoviedb.org/3/movie/search';
this.httpClient.get(url, { params })
.subscribe(console.log);
}
watch: {
'$route'(){
this.startComponent()
}
}<template>
<div class="input">
<input
type="text"
class="input__field"
:class="{ 'input__field_error': errors.length > 0 }"
:placeholder="placeholder"
:value="value"
:disabled="disabled"
@input="handleInput"
>
<div class="input__errors">
<p
v-for="(error, index) in errors"
:key="index"
class="input__error"
>
{{ error }}
</p>
</div>
</div>
</template>
<script>
export default {
name: 'custom-input',
props: {
disabled: {
type: Boolean,
default: false,
},
errors: {
type: Array,
default: () => ([]),
},
value: {
type: String,
default: '',
},
placeholder: {
type: String,
default: '',
},
},
methods: {
handleInput({ target: { value } }) {
this.$emit('onInput', value);
},
},
};
</script><template>
<form @onSubmit.prevent="handleSubmit">
<custom-input
:value="phone"
:disabled="loading"
:errors="phoneErrors" // передаем только относящиеся к конкретному инпуту ошибки
@onInput="handleInput"
/>
<button type="submit">Отправить</button>
</form>
</template>
<script>
export default {
data: () => ({
phone: '',
errors: [],
loading: false,
}),
computed: {
phoneErrors() {
// этот код лучше вынести в хелпер, чтобы потом переиспользовать с другими поинтерами
if (this.errors.length === 0) return [];
return this.errors
.filter(error => error.pointer === 'phone') // проверка на нужный поинтер
.map(item => item.detail); // делаем массив только из текста ошибок
},
},
methods: {
handleInput(newPhone) {
// при вводе нового значения обнуляем все ошибки.
// Можно сделать обнуление ошибок по конкретному поинтеру
this.errors = [];
this.phone = newPhone;
},
handleSubmit() {
this.errors = [];
// Если инпут пустой, то сами генерируем ошибку
// и не делаем отправку данных на сервер
if (this.phone.length === 0) {
this.errors = [...this.errors, {
detail: 'Телефон не может быть пустым',
pointer: 'phone',
}];
return;
}
// Если же все ок, то отправляем данные на сервер
this.loading = true;
this.sendPhone();
},
},
};
</script>