RxJS

[g1er]

Трудность, с которой я столкнулся, выглядит таким образом:

В созданной папке я установил rxjs через команду npm install rxjs после чего создал index.html, куда подключил библиотеку rxjs, а также создал файл index.js, в которой буду писать основной код, и тоже подключил его в index.html

после этого я решил проверить, все ли подключилось, и, как указывалось в уроке, попытался вывести в консоль глобальный объект Rx

но в итоге в консоль вышло Uncaught ReferenceError: Rx is not defined

получается, это ошибка с подключением библиотеки или что? я сделал все, как показывалось в уроке, но результаты разные. может дело в самой библиотеке? я имею в иду, в уроке название было rxjs.min.js, а в моем случае название rxjs.umd.min.js. Но других там просто не было. Возможно, это разница версий. Но как мне тогда проверить, работает ли все, и даже если все подключено, будет ли у меня все работать как надо?

[g1er]

Бро, появилась еще одна проблема, которая не особо важная, но тем не менее постоянно мозолит глаза. Речь идет о классе в файле одной директивы, которую я создал, проходя урок про директивы. Вот фото не могу понять, в чем проблема, что мне там надо ему прописать? файл находится здесь. Я понимаю, что ему не хватает каких-то аргументов, но каких - я не знаю. В уроке про этот файл вообще не было речи, потому что его вообще не создавали. Он кажется нужен для тестов, и если я его сейчас удалю, то проблем не будет. Но мне все же хочется разобраться с этим, если у тебя найдется время на это. Спасибо

[IgorKulishov]

I'm using other laptop and I have only En. You are working on unit tests which is great! So in the "font.directive.spec.ts" above you are trying to instantiate FontDirective class from "font.directive.ts" file. If you navigate to the file you can see inside the constructor it has two arguments (which are missing / are not passed into component-class instance):

constructor(private fontRef: ElementRef, private fontRenderer: Renderer2) {}

In order to resolve the problem you will need to pass into the class (new FontDirective) two arguments. Let's see what exactly we have to pass. If you look at the constructor once again in your component class you can see that there are two properties defined, each is defined as type of a class, e.g.:

• private fontRef: ElementRef;
• private fontRenderer: Renderer2;

It will be not a mistake to define each variable as an instance of a class as following:

• private fontRef: ElementRef = new ElementRef();
• private fontRenderer: Renderer2 = new Renderer2();

In other words in your unit test file you can pass in two instances of classes as:

const directive = new FontDirective(new ElementRef(), new Renderer2());

[IgorKulishov]

Please let me know if you have a question. Thank you!

[g1er]

Привет, Бро. Я к тебе за очередной помощью, разъяснить, что я в очередной раз сделал не так. Я сейчас прохожу урок RxJS по созданию стрима из события. Я создаю кнопку, и хочу, чтобы при нажатии у меня событие отображалось в консоли. Проблема начинается после того, как я подписываюсь на это стрим через subscribe(). Не понимаю, что, но браузер начинает ругаться, что у меня Uncaught TypeError: Invalid event target at setupSubscription . Я гуглил, из-за чего это могло бы быть, но ничего подходящего не нашел. Поэтому пришел искать помощи у тебя. Посмотри, пожалуйста, здесь, с 75 строчки. Из-за этого пример не получается разобрать, не могу поэкспериментировать.

Спасибо />

[IgorKulishov]

Привет Бро,

1. В кратце причина в том что html элементы компоненты Angular внутри файла "swim-result.component.html", изолированы в пределах компоненты и привязываются непосредственно к коду внутри класса компоненты и соответственно могут быть "не видны" javascript за пределами класса компоненты. Таким образом JavaScript функционал, содержащийся за пределами класса компоненты не досягает html элементы относящиеся к компоненте ( хотя сам код может работать в отдельных случаях (не касаясь стилей и html элементов), но в целом не рекомендовано делать потому как может привести к багам ). Обычно код пишется в typescript и внутри класса компоненты (я привел примеры тут https://github.com/g1er/Andrew/pull/37/files).

Я привел три варианта в pull request из моего бренча как можно "прицепиться" к html элменетам (DOM) внутри компоненты класса используя различные "angular-friendly" способы.

2. В том же PR я показал как можно твой пример заставить работать только. Можно видать изменения внутри index.html файла - надо вынести html button элемент из файла компоненты и поместить внутрь index.html (не рекомендовано ничего добавлять в сам index.html это не "красивый" pattern , однако иногда можно делать исключения из правил что бы посмотреть как работает).