У меня есть компонент результатов поиска репозиториев по гитхабу в него импортиться сервис гитхаба который мутит хттп-запросы к апи и внутри него с помощью тега есть компонент фидьтра(условно пару инпутов). Как правильно сделать TestBed createtestingmodule чтобы в компонент резудьтата все заинжектилось. С сервисом понятно через providers , а вот заинжектить внутренний компонент этот? пробовал через declarations но выкинул ошибочку.

Здарова парни

вопрос такой, есть метод, в нем this.pending: boolean. в зависимости от тру или фолс во вью элемент отображается или нет, но этот метод используется в двух компонентах, я его вынес отдельно, и теперь вью незнает что есть this.pending. Как нибудь можно прокинуть переменную туда где вызывается данный метод?

Ребят, а где можно натаскать презентаций по Angular 2? Не видео, а именно исходников.

Тебе слайды нужны или примеры с кодом

Тебе слайды нужны или примеры с кодом

Слайды

Слайды

завтра могу накопать.. сегодня уже спать

Да, спасибо

Я предпологаю что можно заинжектить в класс

В конструкторе класса присвой локальному this.pending = pending

в том методе this.pending меняется в ходе выполнения, таким способом оно будет за ним следить? или придется eventEmitter заюзывать

Observable?

вопрос такой, есть метод, в нем this.pending: boolean. в зависимости от тру или фолс во вью элемент отображается или нет, но этот метод используется в двух компонентах, я его вынес отдельно, и теперь вью незнает что есть this.pending. Как нибудь можно прокинуть переменную туда где вызывается данный метод?

каким образом используется pending, там что-то не тривиальное?

Там false, когда начинается скачка файла становится true, при этом во вью когда true появляется лоадер и блокируется ссылка, по окончанию загрузки опять false, но так как я вынес этот метод отдельно, мой компонент который вызывает его ни чего не знает о this.pending.

как я вижу: в контроллере есть асинхронный метод с некоторой логикой, который асинхронный, потому что вызывает внутри себя другой асинхронный метод. Чтобы показать работу асинхронного метода контроллера используется объект pending, который устанавливется в true перед работой методы и по окончанию работы метода. метод выносится из контроллера (в сервис например) и для контроллера ничего не меняется, в нем по прежнему есть асинхронный метод, который вызывает уже вынесенный асинхронный метод. разумеется объект pending из контроллера никуда убирать не нужно

Ребята, есть какой-нибудь изящный способ восстанавливать состояние компонента из роута? Например: у меня есть компонент с поиском и пагинацией. В роут пишется номер страницы и поисковой запрос в виде matrix-параметров. В ngOnInit написано что-то вроде: this.routeSub$ = this.activatedRoute.subscribe(params => {...}) а внутри subscribe if (params['page'] {this.page = page;} if (params['query'] {this.query = query} this.search(this.query, this.page) Со временем поиск усложнился и всем этим стало очень неудобно управлять. Вот. Сумбурно, но скажите, если увидите, что так, как делаю я, обычно не делается. Я подозреваю, что так оно и есть.

Код выглядит как-то странно, но получают параметры именно через activatedRoute

Хотя... Если у тебя нет требований так палить параметры в root, то есть более изящный способ.

Ребята, есть какой-нибудь изящный способ восстанавливать состояние компонента из роута? Например: у меня есть компонент с поиском и пагинацией. В роут пишется номер страницы и поисковой запрос в виде matrix-параметров. В ngOnInit написано что-то вроде: this.routeSub$ = this.activatedRoute.subscribe(params => {...}) а внутри subscribe if (params['page'] {this.page = page;} if (params['query'] {this.query = query} this.search(this.query, this.page) Со временем поиск усложнился и всем этим стало очень неудобно управлять. Вот. Сумбурно, но скажите, если увидите, что так, как делаю я, обычно не делается. Я подозреваю, что так оно и есть.

передавать состояние через url - необходимое условие ?

передавать состояние через url - необходимое условие ?

да. нужно сделать так, чтобы можно было ссылку кинуть другому пользователю — и у него было на странице поиска всё абсолютно так же, как и у тебя.

Так нужно параметры в root path хранить подобным образом или нет?

И тишина ? Ну и ладно

Так нужно параметры в root path хранить подобным образом или нет?

не очень понимаю, что такое root path (

/

Вот этот путь

Так сказать, home

а, похоже, нет.

Собственно, урл в процессе поиска похож на что-то такое: http://service.org/contacts/search;page=1;query=something;

Тогда подойдёт другой способ. Через час(если не забуду) загуглю и дам мануал.

мне известно два варианта: 1. передавать все, необходимые параметры через query params (боль) 2. поддержка "якорей" на бэкенде - когда каждому поиску генерируется uid на бэкенде, и сохраняются результаты этого поиска под этоим uid, потом другой пользователь передают этот uid и получает уже сохраненный результат поиска

Есть ещё один. Похожий на первый.

Только сходу так не вспомню, как называется

мне известно два варианта: 1. передавать все, необходимые параметры через query params (боль) 2. поддержка "якорей" на бэкенде - когда каждому поиску генерируется uid на бэкенде, и сохраняются результаты этого поиска под этоим uid, потом другой пользователь передают этот uid и получает уже сохраненный результат поиска

не, второй не очень привлекательный.

Тогда подойдёт другой способ. Через час(если не забуду) загуглю и дам мануал.

спасибо :)

Есть ещё один. Похожий на первый.

тогда напомню через час, мне тоже интересно теперь

Ребята, есть какой-нибудь изящный способ восстанавливать состояние компонента из роута? Например: у меня есть компонент с поиском и пагинацией. В роут пишется номер страницы и поисковой запрос в виде matrix-параметров. В ngOnInit написано что-то вроде: this.routeSub$ = this.activatedRoute.subscribe(params => {...}) а внутри subscribe if (params['page'] {this.page = page;} if (params['query'] {this.query = query} this.search(this.query, this.page) Со временем поиск усложнился и всем этим стало очень неудобно управлять. Вот. Сумбурно, но скажите, если увидите, что так, как делаю я, обычно не делается. Я подозреваю, что так оно и есть.

А почему не передовать в this.search обьект? тогда код в ngInit можно упростить до this.routeSub$ = this.activatedRoute.subscribe((params) => { this.search(params); })

А почему не передовать в this.search обьект? тогда код в ngInit можно упростить до this.routeSub$ = this.activatedRoute.subscribe((params) => { this.search(params); })

в принципе, да, можно. просто логика переползёт в search. так получше будет, спасибо!

посмотри, может поможет

https://vsavkin.com/angular-router-understanding-router-state-7b5b95a12eab#.bxdvlfuog

вобще это блог создателя роутера. можешь ему прямо написать )

вобще это блог создателя роутера. можешь ему прямо написать )

Да, Витя Савкин, знаю ) надо покурить эту статью. спасибо.

@yurlovm Савкин не отвечает, сам писал

<component> или <myCustomComponent> это просто дополнительный пустой DOM элемент, стилей у него быть никаких не должно если ты их специально не написал

верстка может поехать по нескольким причинам

1) <component> это как пустой div, он изначально блочный

если ты в верстке выводишь какой-то компонент который должен быть inline-block то да, лейаут поедет

еще в css могут быть селекторы типа .container > .my-block { ... } т.е когда расчитано на то что .my-block прямой дочерний элемент

а если ты его обернешь в компонент то соответственно появится лишний родитель <component>

и css поломается

есть такой неочевидный подводный камень, особенно для тех кто не эксперт в верстке

т.к в ng1 можно было без дополнительного контейнера делать директивы

через replace: true

нет, в css нельзя селектор наверх построить

только вниз

но могу подсказать как решить эту проблему в самом компоненте

сделай селектор через атрибут @Component({ selector: '[my-component]', ... })

и вынеси рутовый элемент из темлейта

будешь выводить свой компонент <div my-component class="my-component">

где .my-component с inline-block

в angular guideline пишут что селекторы компонентов лучше только по элементам делать но это исключительный случай

когда верстка ломается

я в таких случаях использую селектор по атрибуту

а почему у тебя компонент роутера с inline-block ?

странно это

роутер обычно большие view-компоненты рендерит, они всегда блочные

ну в любом случае ты понял в чем тут ньюансы, дальше разберешься думаю

Посоны, есть вопрос. Error in ./AppComponent class AppComponent - inline template:2:22 caused by: Expression has changed after it was checked. Previous value: '[object Object]'. Current value: 'undefined'.

Щас скину структуру

<ul> <app-search-bar (onSearchInput)="onSearchInput($event)"></app-search-bar> <app-animal-preview [currentAnimal]="currentAnimal"></app-animal-preview> <app-animals-list [filterBy]="searchInput" (onSelect)="onAnimalSelect($event)"></app-animals-list> </ul>

вот animal-list.component.ts логика фильтра @Input() set filterBy(text: string) { if (text && text !== '') { this.animalsSorted = this.animals.filter(item => item.name.includes(text)); } else { this.animalsSorted = this.animals; } if (this.animalsSorted) { // Change selected when filtering this.onSelect.emit(this.animalsSorted[0]); } }

вот animal-preview.component логи приема аргумента @Input() set currentAnimal(animal: Animal) { this.animal.next(animal); }

и главный app.component export class AppComponent { searchInput: string; currentAnimal: Animal | null; constructor () { this.currentAnimal = null; this.searchInput = ''; } onSearchInput(text: string) { this.searchInput = text; } onAnimalSelect(animal?: Animal) { this.currentAnimal = animal; } }

не могу понять почему еррор?

когда this.onSelect.emit(this.animalsSorted[0]); вот тут кидаю undefined (потомучто никого не нашел) то еррор