{"id":345415,"date":"2023-02-14T09:03:38","date_gmt":"2023-02-14T09:03:38","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=345415"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=345415","title":{"rendered":"\u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0430\u043c\u0438: \u043c\u043d\u043e\u0433\u043e \u0441\u043b\u043e\u0432 \u043e \u043f\u043e\u0442\u043e\u043a\u0430\u0445, \u043e\u0442\u043f\u0438\u0441\u043a\u0430\u0445 \u0438 \u0443\u0442\u0435\u0447\u043a\u0435 \u043f\u0430\u043c\u044f\u0442\u0438<\/span>"},"content":{"rendered":"
<\/div>\n
\n
\n
\n
\n

\u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0430\u043c\u0438 \u2013 \u0441 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0432\u0437\u0433\u043b\u044f\u0434\u0430 \u043d\u0435\u0441\u043b\u043e\u0436\u043d\u0430\u044f \u0442\u0435\u043c\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f, \u043e\u0434\u043d\u0430\u043a\u043e, \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u0443 \u043c\u043d\u043e\u0433\u0438\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u043d\u0430 \u0444\u0440\u043e\u043d\u0442\u0435. \u041f\u043e\u0434 \u043a\u0430\u0442\u043e\u043c \u044f \u0441\u043e\u0431\u0440\u0430\u043b \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u043d\u0430\u0431\u043b\u044e\u0434\u0435\u043d\u0438\u044f \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u0433\u0440\u0430\u043c\u043e\u0442\u043d\u043e \u0432\u044b\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0430\u043c\u0438 \u0431\u0435\u0437 \u0443\u0442\u0435\u0447\u0435\u043a \u043f\u0430\u043c\u044f\u0442\u0438, \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u044f \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438 \u043a\u043e\u043b\u043e\u0441\u0441\u0430\u043b\u044c\u043d\u044b\u0445 \u0442\u0440\u0430\u0442 \u0431\u044e\u0434\u0436\u0435\u0442\u0430. <\/p>\n

\u0417\u0430 \u043e\u0441\u043d\u043e\u0432\u0443 \u044f \u0432\u0437\u044f\u043b \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 RxJs, \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0443\u044e \u0441 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u043c Angular. \u041e\u0434\u043d\u0430\u043a\u043e \u043b\u044e\u0431\u0438\u0442\u0435\u043b\u044f\u043c \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u044d\u0442\u043e \u0442\u043e\u0436\u0435 \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u0441\u044f.<\/p>\n

<\/figcaption><\/figure>\n

\u041f\u043e\u0447\u0435\u043c\u0443 \u044d\u0442\u043e \u0432\u0430\u0436\u043d\u043e<\/strong><\/p>\n

\u041f\u043e\u0434\u043f\u0438\u0441\u043a\u0430 \u043d\u0430 \u043e\u0431\u043e\u0437\u0440\u0435\u0432\u0430\u0435\u043c\u0443\u044e \u043e\u0431\u043b\u0430\u0441\u0442\u044c, \u043d\u0430 \u043f\u043e\u0442\u043e\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431\u0435\u043d \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u043a\u0430\u043a\u0438\u0435-\u043b\u0438\u0431\u043e \u0434\u0430\u043d\u043d\u044b\u0435, \u043f\u0440\u0438\u0432\u043d\u043e\u0441\u0438\u0442 \u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0433\u0438\u0431\u043a\u043e\u0441\u0442\u044c \u0438 \u043c\u043d\u043e\u0433\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u043f\u043e \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u044f\u0446\u0438\u044f\u043c \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044f \u0432 \u043f\u043e\u043b\u043d\u043e\u0439 \u043c\u0435\u0440\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e\u0441\u0442\u0438. \u0412\u0435\u0449\u044c \u043f\u043e-\u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u043c\u0443 \u043f\u043e\u043b\u0435\u0437\u043d\u0430\u044f, \u0433\u0438\u0431\u043a\u0430\u044f, \u043e\u0434\u043d\u0430\u043a\u043e \u0437\u0430 \u0432\u0441\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u043b\u0430\u0442\u0438\u0442\u044c. \u0413\u0434\u0435-\u0442\u043e \u0431\u043e\u043b\u0435\u0435 \u0432\u044b\u0441\u043e\u043a\u0438\u043c \u043f\u043e\u0440\u043e\u0433\u043e\u043c \u0432\u0445\u043e\u0436\u0434\u0435\u043d\u0438\u044f \u0432 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u0443\u044e \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044e, \u0430 \u0432 \u043a\u0430\u043a\u0438\u0445-\u0442\u043e \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u044c\u043d\u043e, \u0432\u0435\u0434\u044c \u043f\u043e-\u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u043c\u0443 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u0432\u0435\u0449\u0438 \u043e\u0447\u0435\u043d\u044c \u0447\u0430\u0441\u0442\u043e \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u044f\u044e\u0442\u0441\u044f \u043d\u0430 \u043f\u043b\u0430\u0442\u043d\u043e\u0439 \u043e\u0441\u043d\u043e\u0432\u0435. <\/p>\n

\u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u043e \u043e\u043f\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0442\u043e\u043a\u0430\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u043e\u0431\u043e\u0439\u0434\u0443\u0442\u0441\u044f \u043d\u0430\u043c \u0432 \u0446\u0435\u043d\u0443 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0438\u0445 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c. \u0425\u043e\u0442\u044c \u044d\u0442\u043e \u0438 \u0437\u0432\u0443\u0447\u0438\u0442 \u0441\u0442\u0440\u0430\u043d\u043d\u043e, \u0432\u0435\u0434\u044c \u0432\u0441\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043f\u043e \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044e \u0437\u0430 \u043f\u043e\u0442\u043e\u043a\u0430\u043c\u0438 \u043d\u0430\u043c \u0443\u0436\u0435 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430, \u0430 \u0442\u0443\u0442 \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u0437\u0430 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c \u043f\u043b\u0430\u0442\u0438\u0442\u044c \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0435\u043c. \u0412\u0430\u0436\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u043f\u043e\u0442\u043e\u043a\u0438 \u043e\u0447\u0435\u043d\u044c \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432, \u043e\u0434\u043d\u0430\u043a\u043e \u043d\u0430 \u0444\u043e\u043d\u0435 \u0432\u0441\u0435\u0439 \u044d\u0442\u043e\u0439 \u043c\u0430\u0433\u0438\u0438 \u0447\u0430\u0441\u0442\u043e \u0437\u0430\u0431\u044b\u0432\u0430\u0435\u043c \u043f\u0440\u043e \u0438\u0445 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u0435. <\/p>\n

\u041f\u043e \u0441\u0443\u0442\u0438, \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0440\u0430\u0432\u043d\u0438\u0442\u044c \u0441 \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0430\u043c\u0438 \u043d\u0430 \u043d\u043e\u0432\u043e\u0441\u0442\u043d\u044b\u0435 \u0438\u0437\u0434\u0430\u043d\u0438\u044f, \u0440\u0430\u0441\u0441\u044b\u043b\u043a\u0430\u043c\u0438 \u0441 \u043d\u043e\u0432\u044b\u043c\u0438 \u0441\u043a\u0438\u0434\u043a\u0430\u043c\u0438, \u043f\u0440\u043e\u0441\u0442\u043e \u0441 \u043d\u0435\u043d\u0443\u0436\u043d\u044b\u043c\u0438 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f\u043c\u0438 \u0438\u043b\u0438 \u0436\u0435, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441 \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0430\u043c\u0438 \u043d\u0430 \u043a\u0430\u043a\u0438\u0435-\u043b\u0438\u0431\u043e \u043f\u043b\u0430\u0442\u043d\u044b\u0435 \u0443\u0441\u043b\u0443\u0433\u0438. \u0412 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u043c\u043e\u043c\u0435\u043d\u0442, \u043a\u0430\u043a\u043e\u0439 \u0431\u044b \u043d\u0438 \u0431\u044b\u043b \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0439 \u0440\u0435\u0441\u0443\u0440\u0441, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u043f\u043e\u0434\u043f\u0438\u0441\u0430\u043b\u0438\u0441\u044c, \u043e\u043d \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u0435\u0442 \u043f\u0440\u0438\u043d\u043e\u0441\u0438\u0442\u044c \u043d\u0430\u043c \u043f\u043e\u043b\u044c\u0437\u0443, \u0438, \u0435\u0441\u043b\u0438 \u043e\u0442 \u043d\u0435\u0433\u043e \u043d\u0435 \u043e\u0442\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c\u0441\u044f, \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u043a \u0437\u0430\u0431\u0438\u0442\u043e\u043c\u0443 \u043f\u043e\u0447\u0442\u043e\u0432\u043e\u043c\u0443 \u044f\u0449\u0438\u043a\u0443, \u0433\u0434\u0435 \u0432 \u043c\u043d\u043e\u0433\u043e\u043e\u0431\u0440\u0430\u0437\u0438\u0438 \u0440\u0430\u0441\u0441\u044b\u043b\u043e\u043a \u0438 \u0441\u043f\u0430\u043c\u0430 \u0443\u0436\u0435 \u043d\u0435 \u043d\u0430\u0439\u0442\u0438 \u043d\u0443\u0436\u043d\u043e\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435, \u043a \u0435\u0436\u0435\u043c\u0435\u0441\u044f\u0447\u043d\u043e\u043c\u0443 \u0441\u043f\u0438\u0441\u044b\u0432\u0430\u043d\u0438\u044e \u0441\u0440\u0435\u0434\u0441\u0442\u0432 \u0441\u043e \u0441\u0447\u0435\u0442\u0430. <\/p>\n

\u0412 \u043d\u0430\u0448\u0435\u043c \u0436\u0435 \u0441\u043b\u0443\u0447\u0430\u0435, \u043f\u0440\u043e\u043f\u0443\u0441\u043a \u043e\u0442\u043f\u0438\u0441\u043a\u0438 \u043d\u0430 \u043f\u043e\u0442\u043e\u043a \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u0442 \u043a \u0443\u0442\u0435\u0447\u043a\u0435 \u043f\u0430\u043c\u044f\u0442\u0438, \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u044e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0432 \u043a\u043e\u043d\u0446\u0435 \u043a\u043e\u043d\u0446\u043e\u0432 \u043a \u043f\u043e\u0442\u0435\u0440\u0435 \u0443\u0434\u043e\u0431\u043d\u043e\u0441\u0442\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0430, \u0438 \u043f\u043e\u0442\u0435\u0440\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439.<\/p>\n

\u041a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u0431\u044b, \u0432\u0441\u0435\u0433\u043e \u043b\u0438\u0448\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432 \u043d\u0443\u0436\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043e\u0442\u043f\u0438\u0441\u0430\u0442\u044c\u0441\u044f, \u043d\u043e \u0432\u0441\u0435 \u043b\u0438 \u0442\u0430\u043a \u043f\u0440\u043e\u0441\u0442\u043e?<\/p>\n

\u041a\u043e\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u043e\u0442\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c\u0441\u044f, \u0430 \u043a\u043e\u0433\u0434\u0430 \u043d\u0435\u0442<\/strong><\/p>\n

\u0422\u043e\u0447\u043d\u043e \u043e\u0442\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c\u0441\u044f \u0432 \u043f\u044f\u0442\u0438 \u0441\u043b\u0443\u0447\u0430\u044f\u0445: \u0444\u043e\u0440\u043c\u044b, \u0440\u043e\u0443\u0442\u0435\u0440, \u0440\u0435\u043d\u0434\u0435\u0440\u0435\u0440, \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u044b\u0435 \u043e\u0431\u043e\u0437\u0440\u0435\u0432\u0430\u0435\u043c\u044b\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0438 ngRx.<\/p>\n

1.\u0424\u043e\u0440\u043c\u044b<\/strong><\/p>\n

\u041d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043e\u0442\u043f\u0438\u0441\u0430\u0442\u044c\u0441\u044f \u043e\u0442 \u0444\u043e\u0440\u043c\u044b \u0438 \u043e\u0442 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043e\u0432, \u043d\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0431\u044b\u043b\u0430 \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0430:<\/p>\n

  ngOnInit() {     this.form = new FormGroup({...});     this.valueChangesSubscription  = this.form.valueChanges.subscribe(console.log);     this.statusChangesSubscription = this.form.statusChanges.subscribe(console.log);   }    ngOnDestroy() {     \/\/ \u0422\u0443\u0442 \u043e\u0442\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c\u0441\u044f   } } <\/code><\/pre>\n
2.\u0420\u043e\u0443\u0442\u0435\u0440<\/strong><\/p>\n
\u0415\u0441\u043b\u0438 \u043c\u044b \u0434\u043e\u0432\u0435\u0440\u0438\u043c\u0441\u044f \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438, \u0442\u043e Angular \u0434\u043e\u043b\u0436\u0435\u043d \u0441\u0430\u043c \u043e\u0442\u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0430\u0441, \u043d\u043e \u0432 \u0440\u0430\u0431\u043e\u0442\u0435 \u044d\u0442\u043e\u0433\u043e \u043d\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441\u0442\u043e\u0438\u0442 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e: <\/p>\n
export class TestComponent {   constructor(private route: ActivatedRoute, private router: Router) { }    ngOnInit() {     this.route.params.subscribe(console.log);     this.route.queryParams.subscribe(console.log);     this.route.fragment.subscribe(console.log);     this.route.data.subscribe(console.log);     this.route.url.subscribe(console.log);          this.router.events.subscribe(console.log);   }    ngOnDestroy() {     \/\/ \u0422\u0443\u0442 \u043e\u0442\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c\u0441\u044f   } } <\/code><\/pre>\n
3.\u0420\u0435\u043d\u0434\u0435\u0440\u0435\u0440<\/strong><\/p>\n
export class TestComponent { constructor(private renderer: Renderer2,              private element : ElementRef) { }    ngOnInit() {     this.clickSubscription = this.renderer.listen(this.element.nativeElement, \"click\", handler);   }    ngOnDestroy() {     \/\/ \u0422\u0443\u0442 \u043e\u0442\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c\u0441\u044f   } } <\/code><\/pre>\n
4.\u0411\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u044b\u0435 \u043e\u0431\u043e\u0437\u0440\u0435\u0432\u0430\u0435\u043c\u044b\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438<\/strong><\/p>\n
\u0422\u0430\u043a\u0438\u0435 \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u0430 interval()<\/code> \u0438\u043b\u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043b\u0443\u0448\u0430\u0442\u044c \u043a\u0430\u043a\u043e\u0435-\u043b\u0438\u0431\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e fromEvent():<\/code><\/p>\n
export class TestComponent {    constructor(private element : ElementRef) { }    interval: Subscription;   click: Subscription;    ngOnInit() {     this.intervalSubscription = Observable.interval(1000).subscribe(console.log);     this.clickSubscription = Observable.fromEvent(this.element.nativeElement, 'click').subscribe(console.log);   }    ngOnDestroy() {     \/\/ \u0422\u0443\u0442 \u043e\u0442\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c\u0441\u044f   } }  <\/code><\/pre>\n
5.ngRx<\/strong><\/p>\n
\u041e\u0442 \u043f\u043e\u0434\u043f\u0438\u0441\u043e\u043a \u043d\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 Store ngRx \u0442\u0430\u043a\u0436\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043e\u0442\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c\u0441\u044f:<\/p>\n
export class TestComponent {    constructor(private store: Store) { }    todos: Subscription;    ngOnInit() {      this.todosSubscription = this.store.select('todos').subscribe(console.log);     }    ngOnDestroy() {     \/\/ \u0422\u0443\u0442 \u043e\u0442\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c\u0441\u044f   } } <\/code><\/pre>\n
\u041e\u0442\u043f\u0438\u0441\u043a\u0430 \u043d\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 Async pipe, @HostListener \u0438 \u043a\u043e\u043d\u0435\u0447\u043d\u044b\u043c\u0438 \u043e\u0431\u043e\u0437\u0440\u0435\u0432\u0430\u0435\u043c\u044b\u043c\u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044f\u043c\u0438.<\/p>\n
1.Async pipe <\/strong><\/p>\n
\u0422\u0443\u0442 \u0432\u0441\u044f \u0440\u0430\u0431\u043e\u0442\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0437\u0430 \u043d\u0430\u0441, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043b\u0438\u0448\u044c \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u043e\u0442\u043e\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435:<\/p>\n
@Component({   selector: 'test',   template: `<todos [todos]=\"todos$ | async\"><\/todos>` }) export class TestComponent {    constructor(private store: Store) { }    ngOnInit() {      this.todos$ = this.store.select('todos');   } } <\/code><\/pre>\n
2.@HostListener<\/strong><\/p>\n
\u041a\u043e\u0433\u0434\u0430 \u043d\u0430\u0432\u0435\u0441\u0438\u043b\u0438 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e HostListener, \u043e\u0442\u043f\u0438\u0441\u043a\u0430 \u0442\u0430\u043a\u0436\u0435 \u043d\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f:<\/p>\n
export class TestDirective {    @HostListener('click')   onClick() {     ....   } } <\/code><\/pre>\n
3.\u041a\u043e\u043d\u0435\u0447\u043d\u044b\u0435 \u043e\u0431\u043e\u0437\u0440\u0435\u0432\u0430\u0435\u043c\u044b\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438<\/strong><\/p>\n
\u0415\u0441\u0442\u044c \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u0430\u0432\u0435\u0440\u0448\u0430\u0442\u0441\u044f \u0441\u0430\u043c\u0438, \u0438 \u043d\u0435 \u0431\u0443\u0434\u0443\u0442 \u0443\u043f\u043e\u0442\u0440\u0435\u0431\u043b\u044f\u0442\u044c \u0434\u0440\u0430\u0433\u043e\u0446\u0435\u043d\u043d\u044b\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u043f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e.<\/p>\n
\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440: timer (), HTTP<\/code>:<\/p>\n
export class TestComponent {    constructor(private http: Http) { }    ngOnInit() {     Observable.timer(1000).subscribe(console.log);     this.http.get('http:\/\/api.com').subscribe(console.log);   } } <\/code><\/pre>\n
\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u043f\u043e\u043d\u044f\u0442\u043d\u0430. \u0420\u0435\u0448\u0435\u043d\u0438\u044f \u0435\u0441\u0442\u044c.<\/strong><\/p>\n
\u0418\u0442\u0430\u043a, \u043a\u043e\u0433\u0434\u0430 \u043d\u0430\u0434\u043e, \u0430 \u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u043d\u0430\u0434\u043e \u043c\u044b \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043b\u0438\u0441\u044c. \u041d\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0433\u043b\u0430\u0432\u043d\u044b\u0439 \u0432\u043e\u043f\u0440\u043e\u0441: \u0430 \u043a\u0430\u043a?<\/p>\n
\u0411\u044b\u043b\u043e \u0431\u044b \u043d\u0435\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u0434\u0430\u0432\u0430\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e, \u043d\u043e \u043d\u0435 \u0434\u0430\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043f\u043e \u0443\u043d\u0438\u0447\u0442\u043e\u0436\u0435\u043d\u0438\u044e. \u0422\u0435\u043f\u0435\u0440\u044c \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c\u0441\u044f \u043a\u0430\u043a \u043e\u0442\u043f\u0438\u0441\u0430\u0442\u044c\u0441\u044f \u043e\u0442 \u043f\u043e\u0442\u043e\u043a\u0430. \u0412 \u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c, \u0447\u0442\u043e \u043e\u0442\u043f\u0438\u0441\u043a\u0430 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u0440\u0438 \u0443\u043d\u0438\u0447\u0442\u043e\u0436\u0435\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0442\u043e \u0435\u0441\u0442\u044c, \u043a\u043e\u0433\u0434\u0430 \u043e\u043d \u043f\u0440\u0435\u043a\u0440\u0430\u0449\u0430\u0435\u0442 \u0441\u0432\u043e\u044e \u0440\u0430\u0431\u043e\u0442\u0443 \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u043c\u044b \u0443\u0436\u0435 \u043d\u0435 \u0436\u0434\u0435\u043c \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u043e\u0442 \u043d\u0435\u0433\u043e. \u041e\u0442\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c\u0441\u044f \u0432 \u0445\u0443\u043a\u0435 onDestroy<\/p>\n
\u0421\u0430\u043c\u044b\u0439 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e, \u0432 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043f\u043e\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0430, \u0430 \u043f\u0440\u0438 \u0443\u043d\u0438\u0447\u0442\u043e\u0436\u0435\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0442 \u043d\u0435\u0435 \u043e\u0442\u043f\u0438\u0441\u0430\u0442\u044c\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043a\u043b\u0430\u0441\u0441\u0430:<\/p>\n
@Component() export class ManualComponent implements OnInit, OnDestroy {   private subscription = Subscription.EMPTY;    ngOnInit() {     this.subscription = interval(1000).subscribe(observer('manual'));   }    ngOnDestroy(): void {     this.subscription.unsubscribe();   } } <\/code><\/pre>\n
\u0414\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043d\u0435\u043f\u043b\u043e\u0445\u043e\u0439, \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431. \u0423\u0448\u0435\u043b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043e\u0442\u043f\u0438\u0441\u0430\u043b\u0438\u0441\u044c \u043e\u0442 \u043f\u043e\u0442\u043e\u043a\u0430. \u041d\u043e \u0432\u0435\u0434\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0440\u0435\u0434\u043a\u043e \u0443\u043c\u0435\u0449\u0430\u044e\u0442\u0441\u044f \u0432 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u043e\u0442\u043e\u043a\u043e\u0432 \u0438 \u043b\u043e\u0433\u0438\u043a\u0430 \u043f\u043e\u0440\u044f\u0434\u043a\u043e\u043c \u0431\u043e\u043b\u044c\u0448\u0435, \u0430 \u0437\u043d\u0430\u0447\u0438\u0442, \u0435\u0441\u043b\u0438 \u043f\u043e\u0434\u043f\u0438\u0441\u043e\u043a \u043c\u043d\u043e\u0433\u043e, \u0442\u043e \u043c\u044b \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u0431\u0443\u0434\u0435\u043c \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u043e\u0442\u043f\u0438\u0441\u043a\u0438 \u0432 onDestroy. \u042d\u0442\u043e \u043d\u0435\u043a\u0440\u0430\u0441\u0438\u0432\u043e, \u0434\u0430 \u0438 \u0441\u0438\u043b \u043c\u043d\u043e\u0433\u043e \u0443\u0439\u0434\u0435\u0442 \u0447\u0442\u043e\u0431\u044b \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c.<\/p>\n
\u0418\u0434\u0435\u043c \u0434\u0430\u043b\u044c\u0448\u0435.<\/p>\n
\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043c\u0430\u0441\u0441\u0438\u0432, \u043a\u0443\u0434\u0430 \u043f\u0440\u043e\u0441\u0442\u043e \u0431\u0443\u0434\u0435\u043c \u043f\u0443\u0448\u0438\u0442\u044c \u043d\u043e\u0432\u0443\u044e \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0443, \u0430 \u043f\u0440\u0438 \u0443\u043d\u0438\u0447\u0442\u043e\u0436\u0435\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0443\u0434\u0430\u043b\u0438\u043c \u0432\u0441\u0435 \u0441\u043a\u043e\u043f\u043e\u043c:<\/p>\n
@Component({\u2026}) export class ManualComponent implements OnInit, OnDestroy {     subscription1$: Subscription;      subscription2$: Subscription;      subscriptions: Subscription[] = [];     ngOnInit () {         this.subscription1$ = Rx.Observable.interval(1000).subscribe(x => console.log(\"From interval 1000\" x));         this.subscription2$ = Rx.Observable.interval(400).subscribe(x => console.log(\"From interval 400\" x));         this.subscriptions.push(this.subscription1$);         this.subscriptions.push(this.subscription2$);     }         ngOnDestroy() {         this.subscriptions.forEach((subscription) => subscription.unsubscribe());     } } <\/code><\/pre>\n
\u0423\u0436\u0435 \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u043b\u0443\u0447\u0448\u0435, \u0438 \u043a\u043e\u0434 \u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0441\u044f \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u0447\u0438\u0449\u0435, \u043d\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0437\u0430\u0439\u0442\u0438 \u0434\u0430\u043b\u044c\u0448\u0435 \u0441 \u044d\u0442\u0438\u043c \u043c\u0435\u0442\u043e\u0434\u043e\u043c:<\/p>\n
@Component({\u2026}) export class ManualComponent implements OnInit, OnDestroy {     subscription = new Subscription();      ngOnInit () {          this.subscription.add(interval(900).subscribe(observer('add 1')));      this.subscription.add(interval(1200).subscribe(observer('add 2')));     }         ngOnDestroy() {         this.subscription.unsubscribe();     } } <\/code><\/pre>\n
\u0418\u0437\u0431\u0430\u0432\u0438\u043b\u0438\u0441\u044c \u043e\u0442 \u043b\u0438\u0448\u043d\u0438\u0445 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445, \u0446\u0438\u043a\u043b\u043e\u0432, \u0438 \u0432\u0441\u0435\u0433\u043e \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0433\u043e, \u0447\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043e\u0447\u0435\u043d\u044c \u0438\u0437\u0431\u044b\u0442\u043e\u0447\u043d\u043e. \u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0435 \u0442\u0430\u043a \u0443\u0436 \u0438 \u043b\u0435\u043d\u044c \u0432\u0441\u0435 \u044d\u0442\u043e \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0438 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0443\u0432\u0435\u0440\u0435\u043d\u043d\u044b\u043c, \u0447\u0442\u043e \u043f\u0430\u043c\u044f\u0442\u044c \u043d\u0438\u043a\u0443\u0434\u0430 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u0430\u0440\u044f\u0442\u044c\u0441\u044f.<\/p>\n
\u041e\u0434\u043d\u0430\u043a\u043e \u043c\u044b \u043d\u0430 \u044d\u0442\u043e\u043c \u043d\u0435 \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c\u0441\u044f, \u044d\u0442\u043e \u0434\u0430\u043b\u0435\u043a\u043e \u043d\u0435 \u043f\u0440\u0435\u0434\u0435\u043b. \u0417\u0430\u043a\u0440\u044b\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u043d\u043e\u0441\u0442\u0438 \u044d\u0442\u0438 \u043c\u0435\u0442\u043e\u0434\u044b \u043c\u043e\u0433\u0443\u0442, \u043e\u0434\u043d\u0430\u043a\u043e \u043c\u044b \u043f\u043e\u0439\u0434\u0435\u043c \u043f\u043e \u0431\u043e\u043b\u0435\u0435 \u044d\u043b\u0435\u0433\u0430\u043d\u0442\u043d\u043e\u043c\u0443 \u043f\u0443\u0442\u0438 \u0438 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u043f\u043e\u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0435\u0435.<\/p>\n
\u041e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u044b \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 RxJs, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u0446\u0435\u043b\u044f\u0445 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f \u043f\u043e\u0442\u043e\u043a\u0430, \u043a\u043e\u0433\u0434\u0430 \u043d\u0430\u043c \u044d\u0442\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e:<\/p>\n
\u041c\u0435\u0442\u043e\u0434\u044b <\/strong>take(n), first, takeWhile, takeUntil<\/code><\/p>\n
\u041d\u0430\u0447\u043d\u0435\u043c \u0441 take(n)<\/code>, \u0438 \u0432\u043d\u0430\u0447\u0430\u043b\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c:<\/p>\n
\u0441onst intervalCount = interval(1000); const takeFive = intervalCount.pipe(take(5)); takeFive.subscribe(x => console.log(x));<\/code><\/pre>\n
\u0422\u0443\u0442 \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e \u0432\u0438\u0434\u043d\u043e, \u0447\u0442\u043e \u0432 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f \u0447\u0438\u0441\u043b\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u0434\u0430\u044e\u0449\u0435\u0435 \u0435\u043c\u0443 \u043f\u043e\u043d\u044f\u0442\u044c, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u043f\u0440\u043e\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0447\u0435\u0440\u0435\u0437 \u0441\u0435\u0431\u044f, \u043f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u0437\u0430\u0432\u0435\u0440\u0448\u0438\u0442\u044c \u043f\u043e\u0442\u043e\u043a. \u0414\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0443\u0434\u043e\u0431\u043d\u043e, \u0432\u0435\u0434\u044c \u043c\u044b \u0443\u0436\u0435 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0445\u0443\u043a onDestroy.<\/p>\n
\u041e\u0434\u043d\u0430\u043a\u043e \u0441 \u044d\u0442\u0438\u043c \u043d\u0435 \u0432\u0441\u0435 \u0442\u0430\u043a \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e \u043a\u0430\u043a \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u043d\u0430 \u043f\u0435\u0440\u0432\u044b\u0439 \u0432\u0437\u0433\u043b\u044f\u0434, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u0438\u0437 \u0447\u0435\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u044d\u0442\u043e\u0442 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 \u0432\u043d\u0443\u0442\u0440\u0438:<\/p>\n
export function take<T>(count: number): MonoTypeOperatorFunction<T> {   return (source: Observable<T>) => {     if (count === 0) {       return empty();     } else {       return source.lift(new TakeOperator(count));     }   }; }<\/code><\/pre>\n
\u0422\u0443\u0442 \u043c\u044b \u0432\u0438\u0434\u0438\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e count, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0440\u043e\u043f\u0443\u0441\u0442\u0438\u0442\u044c. \u0414\u0430\u043b\u0435\u0435 \u0435\u0441\u043b\u0438, \u0443\u0441\u043b\u043e\u0432\u0438\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u043e, \u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u043f\u0440\u043e\u0448\u043b\u043e \u0447\u0435\u0440\u0435\u0437 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440, \u043d\u0430\u0448 \u043f\u043e\u0442\u043e\u043a \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f.<\/p>\n
\u0410 \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u0432\u043e\u0442 \u0442\u0430\u043a\u043e\u0439 \u0432\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n
from([1, 2, 3])     .pipe(         filter(value => false),         take(1)     ).subscribe(console.log) <\/code><\/pre>\n
take(n)<\/code> \u0432\u0441\u0435\u0433\u0434\u0430 \u043e\u0436\u0438\u0434\u0430\u0435\u0442, \u0447\u0442\u043e \u0447\u0435\u0440\u0435\u0437 \u043d\u0435\u0433\u043e \u043f\u0440\u043e\u0439\u0434\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u0438 \u043f\u043e\u0441\u043b\u0435 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u043e\u043d \u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u0442 \u043e\u0442\u043f\u0438\u0441\u043a\u0443 \u0438 \u0437\u0430\u0432\u0435\u0440\u0448\u0438\u0442 \u043f\u0440\u043e\u0446\u0435\u0441\u0441. \u041e\u0434\u043d\u0430\u043a\u043e \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u043f\u0440\u0438\u043b\u0435\u0442\u0438\u0442 \u0432 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440, \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u0443\u0442\u0435\u0447\u043a\u0430 \u043f\u0430\u043c\u044f\u0442\u0438. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u0441\u0435\u0433\u0434\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u043b\u0435\u0434\u0438\u0442\u044c, \u0447\u0442\u043e\u0431\u044b \u043f\u0435\u0440\u0435\u0434 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u043e\u043c \u043d\u0435 \u0441\u0442\u043e\u044f\u043b\u043e \u043d\u0438\u0433\u0434\u0435 \u0444\u0438\u043b\u044c\u0442\u0440\u0430 \u0438\u043b\u0438 \u0440\u0435\u0434\u044e\u0441\u0435\u0440\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044e\u0442 false \u0438\u043b\u0438 \u043f\u0443\u0441\u0442\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435.<\/p>\n
\u041c\u0435\u0442\u043e\u0434 <\/strong>takeWhile(predicate)<\/code><\/p>\n
\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0438\u043c \u043d\u0435 \u0441\u043b\u043e\u0436\u043d\u043e, \u0438 \u0435\u0441\u043b\u0438 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0443\u0441\u043b\u043e\u0432\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0441\u043b\u0435\u0434\u0438\u0442 \u0437\u0430 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0435\u043d\u0438\u0435\u043c \u043f\u043e\u0442\u043e\u043a\u0430, \u0442\u043e \u0434\u0430\u043d\u043d\u044b\u0439 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 \u043d\u0430\u043c \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u0434\u043e\u0439\u0434\u0435\u0442. \u041f\u0440\u0438\u0447\u0435\u043c \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442 \u0447\u0435\u0440\u0435\u0437 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440, \u0434\u043e\u043b\u0436\u043d\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0431\u0443\u043b\u0435\u0432\u0441\u043a\u0438\u0439 \u0442\u0438\u043f:<\/p>\n
const clicks = fromEvent<PointerEvent>(document, 'click'); const result = clicks.pipe(takeWhile(ev => ev.clientX > 200)); result.subscribe(x => console.log(x));<\/code><\/pre>\n
\u0422\u0435\u043f\u0435\u0440\u044c \u0437\u0430\u0433\u043b\u044f\u043d\u0435\u043c \u043a\u0430\u043a \u043e\u043d \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442<\/p>\n
protected _next(value: T): void {   const destination = this.destination;   let result: boolean;   try {     result = this.predicate(value, this.index++);   } catch (err) {     destination.error(err);     return;   }   this.nextOrComplete(value, result); }<\/code><\/pre>\n
\u041f\u043e\u043a\u0430 \u043f\u0440\u0435\u0434\u0438\u043a\u0430\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f, \u0442\u043e \u0435\u0441\u0442\u044c \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 true, \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043f\u043e\u0445\u043e\u0434\u044f\u0442 \u0447\u0435\u0440\u0435\u0437 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 \u0438 \u0432\u0441\u0435 \u043e\u0442\u043b\u0438\u0447\u043d\u043e, \u043d\u043e \u043a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0435\u0434\u0438\u043a\u0430\u0442 \u043d\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0438 \u043f\u0440\u0438\u043b\u0435\u0442\u0430\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u0442\u043e \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0430 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043a\u0440\u044b\u0442\u0430.<\/p>\n
\u0418 \u043e\u043f\u044f\u0442\u044c \u043d\u0435 \u0432\u0441\u0435 \u0442\u0430\u043a \u0433\u043b\u0430\u0434\u043a\u043e. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044f \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043a\u043b\u0438\u043a\u0430 \u043c\u044b\u0448\u0438, \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u043d\u0435\u0433\u043e \u043a\u0430\u043a \u0440\u0430\u0437-\u0442\u0430\u043a\u0438 \u043d\u0430\u0448 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0441\u0441\u044b\u043b\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e isDestroyed, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0441\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432 \u043c\u043e\u043c\u0435\u043d\u0442 \u0443\u043d\u0438\u0447\u0442\u043e\u0436\u0435\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n
isDestroyed = false;  fromEvent(this.element.nativeElement, 'click')      .pipe(          takeWhile(() => this.isDestroyed)      ).subscribe(console.log)  ngOnDestroy(){   this.isDestroyed = true; }<\/code><\/pre>\n
\u0422\u043e \u0435\u0441\u0442\u044c, \u043f\u0440\u0438 \u0443\u043d\u0438\u0447\u0442\u043e\u0436\u0435\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f, \u0438, \u043f\u043e \u0438\u0434\u0435\u0435, \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u0442\u044c\u0441\u044f. \u041e\u0434\u043d\u0430\u043a\u043e, \u0435\u0441\u043b\u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u0442\u0435\u043b\u044c\u043d\u0435\u0435, \u0442\u043e \u043f\u0440\u0438 \u0443\u043d\u0438\u0447\u0442\u043e\u0436\u0435\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0438\u043a\u0442\u043e \u043d\u0435 \u0441\u043b\u0443\u0448\u0430\u0435\u0442 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043a\u043b\u0438\u043a\u0430 \u043f\u043e \u043d\u0435\u043c\u0443, \u0430 \u0437\u043d\u0430\u0447\u0438\u0442, \u043d\u0438\u043a\u0430\u043a\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u043b\u0435\u0442\u0430\u0442\u044c \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0447\u0435\u0440\u0435\u0437 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440, \u0438 \u043e\u043d \u043d\u0435 \u0437\u0430\u043a\u0440\u043e\u0435\u0442 \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0443. \u041e\u0442\u0441\u044e\u0434\u0430 \u0443\u0442\u0435\u0447\u043a\u0430.<\/p>\n
\u041c\u0435\u0442\u043e\u0434 <\/strong>first()<\/code><\/p>\n
\u0414\u0430\u043d\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0442\u043e\u0447\u043d\u043e \u0442\u0430\u043a \u0436\u0435, \u043a\u0430\u043a \u0438 \u0434\u0432\u0430 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0445. \u0421\u0443\u0442\u044c \u0435\u0433\u043e \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u0431\u0435\u0437 \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u0443\u0441\u043b\u043e\u0432\u0438\u0439 \u0432\u0437\u044f\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u0438 \u0437\u0430\u043a\u0440\u044b\u0442\u044c \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0443. \u041a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u0431\u044b, \u0442\u0443\u0442 \u0442\u043e\u0447\u043d\u043e \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u0439\u0442\u0438 \u043d\u0435 \u0442\u0430\u043a, \u043e\u0434\u043d\u0430\u043a\u043e \u0435\u0441\u0442\u044c \u043e\u0434\u043d\u043e \u041d\u041e.<\/p>\n
\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a: <\/p>\n
protected _complete(): void{   const destination = this.destination;   if(!this.hasCompleted && typeof this.defaultValue !== 'undefined') {     destination.next(this.defaultValue);     destination.complete();   } else if (!this.hasCompleted) {     destination.error(new EmptyError())   } }<\/code><\/pre>\n
\u0422\u0443\u0442 \u0432\u0438\u0434\u043d\u043e, \u0447\u0442\u043e \u0432 \u0441\u043b\u0443\u0447\u0430\u0435, \u0435\u0441\u043b\u0438 \u0432 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 \u0437\u0430\u0439\u0434\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 undefined, \u0442\u043e \u0432\u0441\u0435 \u0443\u043f\u0430\u0434\u0435\u0442 \u0441 \u043e\u0448\u0438\u0431\u043a\u043e\u0439. \u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043d\u0435 \u0434\u043e\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043f\u043e\u043f\u0430\u0434\u0430\u043d\u0438\u044f undefined \u0432 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440.<\/p>\n
\u041c\u0435\u0442\u043e\u0434 <\/strong>takeUntil()<\/code><\/p>\n
\u0414\u0430\u043d\u043d\u044b\u0439 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c \u0434\u043e \u0442\u0435\u0445 \u043f\u043e\u0440, \u043f\u043e\u043a\u0430 \u0432 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u044f\u044e\u0449\u0438\u0439 \u043f\u043e\u0442\u043e\u043a \u043d\u0435 \u043f\u0440\u043e\u043a\u0438\u043d\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043d\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0435\u043c\u0443 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0446\u0435\u043f\u043e\u0447\u043a\u0443 \u0434\u0430\u043b\u044c\u0448\u0435. \u0422\u043e \u0435\u0441\u0442\u044c \u0432 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u0445 \u0443 \u043d\u0430\u0441 Observable, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u044f\u0435\u0442 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 \u043e \u043f\u0440\u0435\u043a\u0440\u0430\u0449\u0435\u043d\u0438\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0438.\u00a0 \u0421\u0442\u043e\u0438\u0442 \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u0442\u0443\u0442 \u043c\u044b \u043d\u0435 \u043f\u043e\u043b\u0435\u0437\u0435\u043c \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u043f\u043e\u0434\u0432\u043e\u0434\u043d\u044b\u0435 \u043a\u0430\u043c\u043d\u0438, \u0442\u0430\u043a \u043a\u0430\u043a \u044d\u0442\u043e \u0447\u0435\u0441\u0442\u043d\u044b\u0439 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 \u0438 \u0434\u0435\u043b\u0430\u0435\u0442 \u0442\u043e, \u0447\u0442\u043e \u0435\u043c\u0443 \u0441\u043a\u0430\u0437\u0430\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c.<\/p>\n
const source = interval(1000); const clicks = fromEvent(document, 'click'); const result = source.pipe(takeUntil(clicks)); result.subscribe(x => console.log(x));<\/code><\/pre>\n
\u0410 \u0432\u043e\u0442 \u0438 \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u0437\u044f\u0442\u044b\u0439 \u043f\u0440\u044f\u043c\u043e \u0438\u0437 \u0440\u0430\u0431\u043e\u0447\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u041a\u0430\u043a \u0438 \u0431\u044b\u043b\u043e \u0441\u043a\u0430\u0437\u0430\u043d\u043e \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u0441\u0442\u0430\u0442\u044c\u0438, \u043e\u0442 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043e\u0432 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043e\u0442\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c\u0441\u044f. \u0412 \u044d\u0442\u043e\u043c \u043a\u043e\u0434\u0435 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0430, \u0441\u043b\u0443\u0448\u0430\u044e\u0449\u0430\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u043f\u043e\u043b\u044f \u0444\u043e\u0440\u043c\u044b. \u041e\u0434\u043d\u0430\u043a\u043e \u0441\u0430\u043c\u0430 \u0444\u043e\u0440\u043c\u0430 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435, \u0438 \u043a\u043e\u0433\u0434\u0430 \u043e\u043d \u043f\u0440\u0435\u043a\u0440\u0430\u0449\u0430\u0435\u0442 \u0441\u0432\u043e\u044e \u0440\u0430\u0431\u043e\u0442\u0443 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0438\u0437\u0431\u0430\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u043e\u0442 \u0432\u0441\u0435\u0433\u043e \u043c\u0443\u0441\u043e\u0440\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u043f\u043e\u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u0438 \u043d\u0430\u0432\u0440\u0435\u0434\u0438\u0442 \u043f\u0440\u043e\u0435\u043a\u0442\u0443. \u0414\u043b\u044f \u044d\u0442\u0438\u0445 \u0446\u0435\u043b\u0435\u0439 \u043e\u0431\u044a\u044f\u0432\u0438\u043c ReplaySubject,<\/code> \u0441\u043f\u043e\u0441\u043e\u0431\u043d\u044b\u0439 \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u043b\u0438\u0448\u044c \u043e\u0434\u043d\u043e \u0431\u0443\u043b\u0435\u0432\u0441\u043a\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 new ReplaySubject(1).<\/code><\/p>\n
\u0410 \u0432 \u0445\u0443\u043a\u0435 onDestroy \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043a\u0430\u0436\u0435\u043c \u0435\u043c\u0443 \u0432\u044b\u0431\u0440\u043e\u0441\u0438\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u0438 \u0438 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u0442 \u043a \u043e\u0442\u043f\u0438\u0441\u043a\u0435 \u043e\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0444\u043e\u0440\u043c\u044b. \u0414\u0430\u043b\u0435\u0435 \u0442\u0430\u043a\u0430\u044f \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u043d\u0435\u0438\u0437\u043c\u0435\u043d\u043d\u043e\u0439, \u0438 \u043d\u0435 \u043f\u043e\u0440\u0442\u0438\u0442 \u043a\u043e\u0434, \u0432\u0435\u0434\u044c \u0434\u0430\u043b\u044c\u0448\u0435 \u043f\u043e\u043f\u0440\u043e\u0441\u0442\u0443 \u0432 \u043a\u0430\u0436\u0434\u0443\u044e \u043d\u043e\u0432\u0443\u044e \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0443 \u0441\u0442\u043e\u0438\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c takeUntil(this.componentDestroyed$)<\/code>, \u0438 \u0432\u0441\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043a\u0430\u043a \u0438 \u043e\u0436\u0438\u0434\u0430\u043b\u043e\u0441\u044c:<\/p>\n
componentDestroyed$: ReplaySubject<boolean> = new ReplaySubject(1);  this.form.get('approvalDate').valueChanges   .pipe(     takeUntil(this.componentDestroyed$)   )   .subscribe(v => {     console.log(v);   })  ngOnDestroy() {   this.componentDestroyed$.next(true)   this.componentDestroyed$.complete() }<\/code><\/pre>\n
\u0412\u0441\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u043d\u044b\u0435 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442 \u0441\u0432\u043e\u044e \u0437\u0430\u0434\u0430\u0447\u0443, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442 \u0435\u0451, \u043a\u0430\u043a \u0438 \u043e\u043f\u0438\u0441\u0430\u043d\u043e \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438, \u043e\u0434\u043d\u0430\u043a\u043e \u0432 \u043b\u044e\u0431\u043e\u043c \u0438\u0437 \u043d\u0438\u0445 \u0432\u0430\u0436\u0435\u043d \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n
Async Pipe<\/strong><\/p>\n
\u041a\u043e\u043d\u0435\u0447\u043d\u043e \u0436\u0435 \u043d\u0435\u043b\u044c\u0437\u044f \u043d\u0435 \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u044c \u043e\u0431 \u044d\u0442\u043e\u0439 \u043e\u043f\u0446\u0438\u0438 \u0432 Angular. \u0421\u0430\u043c\u044b\u0439 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043e\u0442\u043f\u0438\u0441\u0430\u0442\u044c\u0441\u044f — \u044d\u0442\u043e \u043d\u0435 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0440\u0443\u043a\u0430\u043c\u0438 \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0443. \u0414\u043b\u044f \u0441\u043b\u0443\u0447\u0430\u0435\u0432, \u043a\u043e\u0433\u0434\u0430 \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b, \u0447\u0442\u043e\u0431\u044b \u0438\u0445 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0438 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441 \u043d\u0438\u043c\u0438, \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u043e\u0431\u0449\u0435 \u0437\u0430\u0431\u044b\u0442\u044c \u043f\u0440\u043e \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0438.<\/p>\n
\u0421\u0440\u0430\u0437\u0443 \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043a \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c:<\/p>\n
\u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e, \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u0441\u0442\u0440\u0438\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u043e\u0439 \u0432\u044b\u0431\u0440\u043e\u0441\u0438\u0442 \u0441\u0442\u0440\u043e\u043a\u0443 \u0441 \u0438\u043c\u0435\u043d\u0435\u043c<\/p>\n
export class AppComponent { name$ = of(\u2018Dan\u2019).pipe(delay(1500)); }<\/code><\/pre>\n
\u0410 \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u044d\u0442\u0443 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0441 \u043f\u0430\u0439\u043f\u043e\u043c async<\/p>\n
<p>{{ name$ | async }}<\/p><\/code><\/p>\n
\u041a\u0430\u043a \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442, \u0443 \u043d\u0430\u0441 \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0435 \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0442\u0440\u043e\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0432\u044b\u0434\u0430\u0435\u0442 \u043d\u0430\u0448\u0430 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f.<\/p>\n
\u041e\u0434\u043d\u0430\u043a\u043e \u044d\u0442\u043e \u0432\u0440\u044f\u0434 \u043b\u0438 \u0437\u0430\u043a\u0440\u043e\u0435\u0442 \u0432\u0441\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043f\u043e \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438. \u041f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u043c.<\/p>\n
\u0415\u0441\u043b\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0435 \u043f\u0440\u0438\u0434\u0443\u0442, \u0442\u043e \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0435 \u043d\u0435\u0447\u0435\u0433\u043e \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c, \u0438 \u044d\u0442\u043e \u043f\u043e\u0432\u043b\u0435\u0447\u0435\u0442 \u0437\u0430 \u0441\u043e\u0431\u043e\u0439 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043c\u044b \u0435\u0434\u0432\u0430 \u043b\u0438 \u043e\u0436\u0438\u0434\u0430\u0435\u043c. \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443<\/p>\n
<p *ngIf=\u201d name$ | async\u201d> {{ name$ | async }} <\/p><\/code><\/pre>\n
\u0412\u0440\u043e\u0434\u0435 \u0432\u0441\u0435 \u0443\u043b\u0430\u0436\u0435\u043d\u043e, \u043d\u043e \u043d\u0435\u0442, async \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u0432\u0430\u0436\u0434\u044b, \u0430 \u0437\u043d\u0430\u0447\u0438\u0442, \u0438 \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0430 \u043f\u0435\u0440\u0435\u0434 \u0432\u044b\u0434\u0430\u0447\u0435\u0439 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f. \u042d\u0442\u043e \u0442\u043e\u0436\u0435 \u043d\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442.<\/p>\n
\u041c\u043e\u0436\u043d\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f name$ | async \u0432\u044b\u043d\u0435\u0441\u0442\u0438 \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0435<\/p>\n
<p *ngIf=\"name$ | async as name\">   {{ name }} <\/p><\/code><\/pre>\n
\u0418\u043b\u0438 \u0436\u0435 \u0435\u0441\u043b\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u0446\u0435\u043b\u044b\u0439 \u043c\u0430\u0441\u0441\u0438\u0432 \u0441\u043e \u0441\u043b\u043e\u0436\u043d\u044b\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438, \u0442\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u0442\u0430\u043a: <\/p>\n
<p *ngFor=\"let user of user$ | async\">   <span>User name is {{ user.name }}<\/span>   <span> User surname is {{ user.surname }}<\/span> <\/p><\/code><\/pre>\n
\u0422\u0435\u043f\u0435\u0440\u044c \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044e\u0442\u0441\u044f \u043a\u0430\u043a \u043d\u0430\u0434\u043e, \u0438 \u0432\u0441\u0435 \u044d\u0442\u043e \u0441 \u043c\u0438\u043d\u0438\u043c\u0443\u043c\u043e\u043c \u043a\u043e\u0434\u0430, \u0430 \u0441\u0430\u043c\u043e\u0435 \u0433\u043b\u0430\u0432\u043d\u043e\u0435 \u0431\u0435\u0437 \u044f\u0432\u043d\u044b\u0445 \u043f\u043e\u0434\u043f\u0438\u0441\u043e\u043a. async<\/code> \u0441\u0434\u0435\u043b\u0430\u0435\u0442 \u0432\u0441\u0435 \u0437\u0430 \u0432\u0430\u0441.<\/p>\n
\u0420\u0435\u0448\u0435\u043d\u0438\u044f \u0438\u0437 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a<\/strong><\/p>\n
\u041f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u043c \u0442\u0435\u043c\u0443 \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u0438\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043a\u043e\u0434\u0430. \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440\u0430\u043c\u0438 \u0434\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b.<\/p>\n
\u041e\u043d\u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u043a\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u043e\u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u0443\u0435\u0442 \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0438, \u0438 \u0437\u0430\u0432\u0435\u0440\u0448\u0438\u0442 \u0438\u0445, \u043a\u043e\u0433\u0434\u0430 \u044d\u0442\u043e \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f. \u041e\u0434\u0438\u043d \u0440\u0430\u0437 \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u043a\u043e\u0434 \u0438 \u0431\u0443\u0434\u0435\u043c \u043f\u043e\u0434\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0435\u0433\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n
\u041d\u0443 \u0430 \u0447\u0442\u043e, \u0435\u0441\u043b\u0438 \u043e\u0431\u043e \u0432\u0441\u0435\u043c \u044d\u0442\u043e\u043c \u0443\u0436\u0435 \u043f\u043e\u0437\u0430\u0431\u043e\u0442\u0438\u043b\u0438\u0441\u044c \u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043b\u0438 \u044d\u0442\u0438 \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440\u044b \u0437\u0430 \u043d\u0430\u0441?<\/p>\n
\u0418 \u043c\u043e\u0436\u043d\u043e \u0443\u0431\u0440\u0430\u0442\u044c \u044d\u0442\u0430\u043f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u0432\u043e\u0435\u0433\u043e \u043a\u043e\u0434\u0430, \u0438 \u0432\u0437\u044f\u0442\u044c \u0433\u043e\u0442\u043e\u0432\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435, \u0441\u043f\u043e\u0441\u043e\u0431\u043d\u043e\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0437\u0430\u0434\u0430\u0447\u0443 \u0441 \u043c\u0430\u043b\u0435\u0439\u0448\u0438\u043c\u0438 \u0442\u0440\u0443\u0434\u043e\u0437\u0430\u0442\u0440\u0430\u0442\u0430\u043c\u0438, \u0432\u0435\u0434\u044c \u0435\u0441\u043b\u0438 \u0431\u044b \u043d\u0435 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u0442\u043e \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0431\u044b \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u0432\u0440\u043e\u0434\u0435 \u0442\u0430\u043a\u043e\u0433\u043e:<\/p>\n
export function unsubscriber(constructor: any) {     const originalOnDestroy = constructor.prototype.ngOnDestroy;      constructor.prototype.componentDestroy = function () {         this._takeUntilDestroy$ = this._takeUntilDestroy$ || new Subject();         return this._takeUntilDestroy$.asObservable();     }      constructor.prototype.ngOnDestroy = function() {         if ( this._takeUntilDestroy$ ) {             this.takeUntilDestroy$.next(true)             this.takeUntilDestroy$.complete();         }         if ( originalOnDestroy && typeof originalOnDestroy === \"function\" ) {             originalOnDestroy.apply( this, arguments );         }     } } <\/code><\/pre>\n
\u041f\u0438\u0441\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043e\u0442 \u043f\u043e\u0442\u043e\u043a\u043e\u0432 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 takeUntil, \u043f\u043e\u0434\u043c\u0435\u043d\u044f\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u0438 \u0445\u0443\u043a \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043f\u0440\u0438 \u0435\u0433\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434\u044b next \u0438 complete, \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u0437\u0430\u0432\u0435\u0440\u0448\u0438\u043b \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043f\u043e\u0442\u043e\u043a\u0430, \u0430 \u043f\u043e\u0442\u043e\u043c \u0435\u0449\u0435 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435, \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u0432\u0441\u044f \u044d\u0442\u0430 \u043c\u0430\u0433\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c.<\/p>\n
\u042d\u0442\u043e\u0433\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435 \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043a\u0430\u043a\u0443\u044e \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u0443 \u044d\u0442\u043e\u043c\u0443 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0443 \u0441\u0435\u0431\u044f \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435.<\/p>\n
\u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 UntilDestroyed<\/strong><\/p>\n
\u0414\u0430\u043d\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0438 \u0432 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u044e \u044f, \u0438 \u043e\u043d\u043e \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0445\u043e\u0440\u043e\u0448\u043e \u0441\u0435\u0431\u044f \u0437\u0430\u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u043e\u0432\u0430\u043b\u043e.<\/p>\n
\u0412\u0441\u0451, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e — \u044d\u0442\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440 @UntilDestroy()<\/code>, \u0442\u0435\u043f\u0435\u0440\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0433\u043e\u0442\u043e\u0432\u0430 \u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e.<\/p>\n
this.appMode$     .pipe(         untilDestroyed(this)     )     .subscribe((mode) => {       this.appMode = mode;     })<\/code><\/pre>\n
\u0412\u0441\u0435, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0434\u0430\u043b\u044c\u0448\u0435 — \u044d\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 \u0434\u043b\u044f RxJs, \u0438 \u043f\u0440\u0438 \u0443\u043d\u0438\u0447\u0442\u043e\u0436\u0435\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c \u043e\u0442\u043f\u0438\u0441\u043a\u0430.<\/p>\n
\u0415\u0433\u043e \u0442\u0430\u043a \u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438 \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u0430\u043c\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435\u043c NgRx \u0438 \u0435\u0433\u043e \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u043e\u043c select:<\/p>\n
appMode$ = this.store.pipe(     untilDestroyed(this),     select(ApplicationsSelectors.selectAppMode) );<\/code><\/pre>\n
\u042d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u043e\u0442\u043b\u0438\u0447\u043d\u043e \u043f\u043e\u0434\u043e\u0439\u0434\u0435\u0442 \u0434\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0430\u043c\u0438, \u043e\u043d\u043e \u0441\u043e\u0447\u0435\u0442\u0430\u0435\u0442\u0441\u044f \u0441 \u043b\u044e\u0431\u044b\u043c\u0438 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f\u043c\u0438, \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u043c\u044b\u043c\u0438 \u043a RxJs, \u0438 \u043d\u0435 \u0432\u0440\u0435\u0434\u0438\u0442 \u0438\u0445 \u0440\u0430\u0431\u043e\u0442\u0435, \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044f \u0441\u0432\u043e\u0438 \u0437\u0430\u0434\u0430\u0447\u0438.<\/p>\n
\u0412\u044b\u0432\u043e\u0434\u044b<\/strong><\/p>\n
\u0418\u0442\u0430\u043a, \u0447\u0442\u043e \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u043d\u0435\u0441\u0442\u0438 \u0438\u0437 \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u0430?<\/p>\n
\u041f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u0442\u0443\u0442 \u043e\u0442\u0431\u0440\u043e\u0441\u0438\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043a\u043e\u0434, \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0439 \u043c\u043d\u043e\u0439 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0438 \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u043e \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u043f\u043e\u043b\u044c\u0437\u0435, \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0435 \u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438.<\/p>\n
\u0413\u043b\u0430\u0432\u043d\u043e\u0435, \u0441 \u0447\u0435\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u0447\u0430\u0442\u044c \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u0435 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043f\u043e\u0442\u043e\u043a\u0430\u043c\u0438 — \u044d\u0442\u043e \u0432\u044b\u044f\u0441\u043d\u0438\u0442\u044c, \u0432 \u043a\u0430\u043a\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043e\u0431 \u044d\u0442\u043e\u043c \u0434\u0443\u043c\u0430\u0442\u044c, \u0432\u0435\u0434\u044c \u0438\u043d\u043e\u0433\u0434\u0430 \u0432\u0441\u0435 \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0435\u0442 \u0441\u0430\u043c\u043e \u0441\u043e\u0431\u043e\u0439 \u0438 \u043d\u0435 \u0441\u043e\u0437\u0434\u0430\u0441\u0442 \u043f\u0440\u043e\u0431\u043b\u0435\u043c. <\/p>\n
\u0412\u043e-\u0432\u0442\u043e\u0440\u044b\u0445, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c, \u0447\u0442\u043e \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u043f\u043e \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u043f\u043e\u0442\u043e\u043a\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u043c \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0442\u0430\u043a\u0436\u0435 \u043d\u0435 \u0437\u0430\u0441\u0442\u0430\u0432\u0438\u0442 \u043d\u0430\u0441 \u0431\u0435\u0441\u043f\u043e\u043a\u043e\u0438\u0442\u0441\u044f \u043e \u043f\u043e\u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u044f\u0445 \u0445\u0430\u043b\u0430\u0442\u043d\u043e\u0441\u0442\u0438, \u043a \u0442\u0430\u043a\u043e\u043c\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0443 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0441\u044f, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, Async Pipe. \u0418 \u0435\u0441\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u043f\u043e \u043f\u043e\u043b\u043d\u043e\u0439, \u0442\u043e \u0432 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435 \u0441\u043b\u0443\u0447\u0430\u0435\u0432 \u0434\u0430\u0436\u0435 \u043d\u0435 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u043b\u0435\u0437\u0442\u044c \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438 \u0441\u043e\u0432\u0435\u0440\u0448\u0430\u0442\u044c \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0443 \u0440\u0443\u043a\u0430\u043c\u0438.<\/p>\n
\u0412-\u0442\u0440\u0435\u0442\u044c\u0438\u0445, \u0435\u0441\u043b\u0438 \u0432\u0430\u043c \u0434\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u043a\u043e\u0439-\u043b\u0438\u0431\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431\u0435\u043d \u0441\u0432\u043e\u0438\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u0442\u043e \u0432\u0430\u043c \u0442\u043e\u0447\u043d\u043e \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u044f\u0442 \u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0439, \u0447\u0442\u043e\u0431\u044b \u044d\u0442\u043e\u0433\u043e \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c. \u0421\u044e\u0434\u0430 \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u043d\u0435\u0441\u0442\u0438, \u043a\u0430\u043a \u0438 \u043e\u0442\u043f\u0438\u0441\u043a\u0443 \u043e\u0442 \u043e\u0431\u0449\u0435\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430, \u043a\u0443\u0434\u0430 \u0437\u0430\u043d\u043e\u0441\u044f\u0442\u0441\u044f \u0432\u0441\u0435 \u0442\u0435\u043a\u0443\u0449\u0438\u0435 \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0438 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435, \u0442\u0430\u043a \u0438 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0435 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u044b \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0438\u043c\u0438. \u041e\u0434\u043d\u0430\u043a\u043e \u0441\u0442\u043e\u0438\u0442 \u0431\u044b\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c, \u0432\u0435\u0434\u044c \u0432\u0441\u0435 \u043e\u043d\u0438 \u0440\u0430\u0437\u043d\u044b\u0435 \u0438 \u0441\u043f\u043e\u0441\u043e\u0431\u043d\u044b \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0435\u0449\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c.<\/p>\n
\u0418 \u0432 \u043a\u043e\u043d\u0446\u0435, \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0437\u0443\u0447\u0438\u0442\u044c \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0438\u0437 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a, \u0432\u0435\u0434\u044c, \u043a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u043b \u044d\u0442\u043e\u0442 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b, \u0434\u0430\u043d\u043d\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0430\u043c\u044b\u043c \u043f\u0440\u0438\u0432\u043b\u0435\u043a\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438. \u0420\u0435\u0447\u044c \u0438\u0434\u0435\u0442 \u043e\u0431 UntilDestroyed.<\/p>\n
\u041d\u0430\u0434\u0435\u044e\u0441\u044c, \u0447\u0442\u043e \u044d\u0442\u043e\u0442 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b
 \u0431\u044b\u043b \u0434\u043b\u044f \u0432\u0430\u0441 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u043c, \u0438 \u0442\u0435\u043f\u0435\u0440\u044c \u043d\u0435\u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u044b\u0435 \u043f\u043e\u0442\u043e\u043a\u0438 \u0438 \u043f\u043e\u0442\u0435\u0440\u0438 \u043f\u0430\u043c\u044f\u0442\u0438 \u043e\u0431\u043e\u0439\u0434\u0443\u0442 \u0441\u0442\u043e\u0440\u043e\u043d\u043e\u0439
 \u0432\u0430\u0448\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u044b.<\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n
  <\/div>\n
  
 \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438  https:\/\/habr.com\/ru\/company\/nspk\/blog\/716770\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
<\/div>\n
\n
\n
\n
\n
\u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0430\u043c\u0438 \u2013 \u0441 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0432\u0437\u0433\u043b\u044f\u0434\u0430 \u043d\u0435\u0441\u043b\u043e\u0436\u043d\u0430\u044f \u0442\u0435\u043c\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f, \u043e\u0434\u043d\u0430\u043a\u043e, \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u0443 \u043c\u043d\u043e\u0433\u0438\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u043d\u0430 \u0444\u0440\u043e\u043d\u0442\u0435. \u041f\u043e\u0434 \u043a\u0430\u0442\u043e\u043c \u044f \u0441\u043e\u0431\u0440\u0430\u043b \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u043d\u0430\u0431\u043b\u044e\u0434\u0435\u043d\u0438\u044f \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u0433\u0440\u0430\u043c\u043e\u0442\u043d\u043e \u0432\u044b\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0430\u043c\u0438 \u0431\u0435\u0437 \u0443\u0442\u0435\u0447\u0435\u043a \u043f\u0430\u043c\u044f\u0442\u0438, \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u044f \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438 \u043a\u043e\u043b\u043e\u0441\u0441\u0430\u043b\u044c\u043d\u044b\u0445 \u0442\u0440\u0430\u0442 \u0431\u044e\u0434\u0436\u0435\u0442\u0430. <\/p>\n
\u0417\u0430 \u043e\u0441\u043d\u043e\u0432\u0443 \u044f \u0432\u0437\u044f\u043b \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 RxJs, \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0443\u044e \u0441 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u043c Angular. \u041e\u0434\u043d\u0430\u043a\u043e \u043b\u044e\u0431\u0438\u0442\u0435\u043b\u044f\u043c \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u044d\u0442\u043e \u0442\u043e\u0436\u0435 \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u0441\u044f.<\/p>\n
<\/figcaption><\/figure>\n
\u041f\u043e\u0447\u0435\u043c\u0443 \u044d\u0442\u043e \u0432\u0430\u0436\u043d\u043e<\/strong><\/p>\n
\u041f\u043e\u0434\u043f\u0438\u0441\u043a\u0430 \u043d\u0430 \u043e\u0431\u043e\u0437\u0440\u0435\u0432\u0430\u0435\u043c\u0443\u044e \u043e\u0431\u043b\u0430\u0441\u0442\u044c, \u043d\u0430 \u043f\u043e\u0442\u043e\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431\u0435\u043d \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u043a\u0430\u043a\u0438\u0435-\u043b\u0438\u0431\u043e \u0434\u0430\u043d\u043d\u044b\u0435, \u043f\u0440\u0438\u0432\u043d\u043e\u0441\u0438\u0442 \u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0433\u0438\u0431\u043a\u043e\u0441\u0442\u044c \u0438 \u043c\u043d\u043e\u0433\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u043f\u043e \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u044f\u0446\u0438\u044f\u043c \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044f \u0432 \u043f\u043e\u043b\u043d\u043e\u0439 \u043c\u0435\u0440\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e\u0441\u0442\u0438. \u0412\u0435\u0449\u044c \u043f\u043e-\u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u043c\u0443 \u043f\u043e\u043b\u0435\u0437\u043d\u0430\u044f, \u0433\u0438\u0431\u043a\u0430\u044f, \u043e\u0434\u043d\u0430\u043a\u043e \u0437\u0430 \u0432\u0441\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u043b\u0430\u0442\u0438\u0442\u044c. \u0413\u0434\u0435-\u0442\u043e \u0431\u043e\u043b\u0435\u0435 \u0432\u044b\u0441\u043e\u043a\u0438\u043c \u043f\u043e\u0440\u043e\u0433\u043e\u043c \u0432\u0445\u043e\u0436\u0434\u0435\u043d\u0438\u044f \u0432 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u0443\u044e \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044e, \u0430 \u0432 \u043a\u0430\u043a\u0438\u0445-\u0442\u043e \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u044c\u043d\u043e, \u0432\u0435\u0434\u044c \u043f\u043e-\u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u043c\u0443 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u0432\u0435\u0449\u0438 \u043e\u0447\u0435\u043d\u044c \u0447\u0430\u0441\u0442\u043e \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u044f\u044e\u0442\u0441\u044f \u043d\u0430 \u043f\u043b\u0430\u0442\u043d\u043e\u0439 \u043e\u0441\u043d\u043e\u0432\u0435. <\/p>\n
\u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u043e \u043e\u043f\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0442\u043e\u043a\u0430\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u043e\u0431\u043e\u0439\u0434\u0443\u0442\u0441\u044f \u043d\u0430\u043c \u0432 \u0446\u0435\u043d\u0443 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0438\u0445 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c. \u0425\u043e\u0442\u044c \u044d\u0442\u043e \u0438 \u0437\u0432\u0443\u0447\u0438\u0442 \u0441\u0442\u0440\u0430\u043d\u043d\u043e, \u0432\u0435\u0434\u044c \u0432\u0441\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043f\u043e \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044e \u0437\u0430 \u043f\u043e\u0442\u043e\u043a\u0430\u043c\u0438 \u043d\u0430\u043c \u0443\u0436\u0435 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430, \u0430 \u0442\u0443\u0442 \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u0437\u0430 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c \u043f\u043b\u0430\u0442\u0438\u0442\u044c \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0435\u043c. \u0412\u0430\u0436\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u043f\u043e\u0442\u043e\u043a\u0438 \u043e\u0447\u0435\u043d\u044c \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432, \u043e\u0434\u043d\u0430\u043a\u043e \u043d\u0430 \u0444\u043e\u043d\u0435 \u0432\u0441\u0435\u0439 \u044d\u0442\u043e\u0439 \u043c\u0430\u0433\u0438\u0438 \u0447\u0430\u0441\u0442\u043e \u0437\u0430\u0431\u044b\u0432\u0430\u0435\u043c \u043f\u0440\u043e \u0438\u0445 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u0435. <\/p>\n
\u041f\u043e \u0441\u0443\u0442\u0438, \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0440\u0430\u0432\u043d\u0438\u0442\u044c \u0441 \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0430\u043c\u0438 \u043d\u0430 \u043d\u043e\u0432\u043e\u0441\u0442\u043d\u044b\u0435 \u0438\u0437\u0434\u0430\u043d\u0438\u044f, \u0440\u0430\u0441\u0441\u044b\u043b\u043a\u0430\u043c\u0438 \u0441 \u043d\u043e\u0432\u044b\u043c\u0438 \u0441\u043a\u0438\u0434\u043a\u0430\u043c\u0438, \u043f\u0440\u043e\u0441\u0442\u043e \u0441 \u043d\u0435\u043d\u0443\u0436\u043d\u044b\u043c\u0438 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f\u043c\u0438 \u0438\u043b\u0438 \u0436\u0435, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441 \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0430\u043c\u0438 \u043d\u0430 \u043a\u0430\u043a\u0438\u0435-\u043b\u0438\u0431\u043e \u043f\u043b\u0430\u0442\u043d\u044b\u0435 \u0443\u0441\u043b\u0443\u0433\u0438. \u0412 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u043c\u043e\u043c\u0435\u043d\u0442, \u043a\u0430\u043a\u043e\u0439 \u0431\u044b \u043d\u0438 \u0431\u044b\u043b \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0439 \u0440\u0435\u0441\u0443\u0440\u0441, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u043f\u043e\u0434\u043f\u0438\u0441\u0430\u043b\u0438\u0441\u044c, \u043e\u043d \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u0435\u0442 \u043f\u0440\u0438\u043d\u043e\u0441\u0438\u0442\u044c \u043d\u0430\u043c \u043f\u043e\u043b\u044c\u0437\u0443, \u0438, \u0435\u0441\u043b\u0438 \u043e\u0442 \u043d\u0435\u0433\u043e \u043d\u0435 \u043e\u0442\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c\u0441\u044f, \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u043a \u0437\u0430\u0431\u0438\u0442\u043e\u043c\u0443 \u043f\u043e\u0447\u0442\u043e\u0432\u043e\u043c\u0443 \u044f\u0449\u0438\u043a\u0443, \u0433\u0434\u0435 \u0432 \u043c\u043d\u043e\u0433\u043e\u043e\u0431\u0440\u0430\u0437\u0438\u0438 \u0440\u0430\u0441\u0441\u044b\u043b\u043e\u043a \u0438 \u0441\u043f\u0430\u043c\u0430 \u0443\u0436\u0435 \u043d\u0435 \u043d\u0430\u0439\u0442\u0438 \u043d\u0443\u0436\u043d\u043e\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435, \u043a \u0435\u0436\u0435\u043c\u0435\u0441\u044f\u0447\u043d\u043e\u043c\u0443 \u0441\u043f\u0438\u0441\u044b\u0432\u0430\u043d\u0438\u044e \u0441\u0440\u0435\u0434\u0441\u0442\u0432 \u0441\u043e \u0441\u0447\u0435\u0442\u0430. <\/p>\n
\u0412 \u043d\u0430\u0448\u0435\u043c \u0436\u0435 \u0441\u043b\u0443\u0447\u0430\u0435, \u043f\u0440\u043e\u043f\u0443\u0441\u043a \u043e\u0442\u043f\u0438\u0441\u043a\u0438 \u043d\u0430 \u043f\u043e\u0442\u043e\u043a \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u0442 \u043a \u0443\u0442\u0435\u0447\u043a\u0435 \u043f\u0430\u043c\u044f\u0442\u0438, \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u044e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0432 \u043a\u043e\u043d\u0446\u0435 \u043a\u043e\u043d\u0446\u043e\u0432 \u043a \u043f\u043e\u0442\u0435\u0440\u0435 \u0443\u0434\u043e\u0431\u043d\u043e\u0441\u0442\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0430, \u0438 \u043f\u043e\u0442\u0435\u0440\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439.<\/p>\n
\u041a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u0431\u044b, \u0432\u0441\u0435\u0433\u043e \u043b\u0438\u0448\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432 \u043d\u0443\u0436\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043e\u0442\u043f\u0438\u0441\u0430\u0442\u044c\u0441\u044f, \u043d\u043e \u0432\u0441\u0435 \u043b\u0438 \u0442\u0430\u043a \u043f\u0440\u043e\u0441\u0442\u043e?<\/p>\n
\u041a\u043e\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u043e\u0442\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c\u0441\u044f, \u0430 \u043a\u043e\u0433\u0434\u0430 \u043d\u0435\u0442<\/strong><\/p>\n
\u0422\u043e\u0447\u043d\u043e \u043e\u0442\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c\u0441\u044f \u0432 \u043f\u044f\u0442\u0438 \u0441\u043b\u0443\u0447\u0430\u044f\u0445: \u0444\u043e\u0440\u043c\u044b, \u0440\u043e\u0443\u0442\u0435\u0440, \u0440\u0435\u043d\u0434\u0435\u0440\u0435\u0440, \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u044b\u0435 \u043e\u0431\u043e\u0437\u0440\u0435\u0432\u0430\u0435\u043c\u044b\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0438 ngRx.<\/p>\n
1.\u0424\u043e\u0440\u043c\u044b<\/strong><\/p>\n
\u041d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043e\u0442\u043f\u0438\u0441\u0430\u0442\u044c\u0441\u044f \u043e\u0442 \u0444\u043e\u0440\u043c\u044b \u0438 \u043e\u0442 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043e\u0432, \u043d\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0431\u044b\u043b\u0430 \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0430:<\/p>\n
  ngOnInit() {     this.form = new FormGroup({...});     this.valueChangesSubscription  = this.form.valueChanges.subscribe(console.log);     this.statusChangesSubscription = this.form.statusChanges.subscribe(console.log);   }    ngOnDestroy() {     \/\/ \u0422\u0443\u0442 \u043e\u0442\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c\u0441\u044f   } } <\/code><\/pre>\n
2.\u0420\u043e\u0443\u0442\u0435\u0440<\/strong><\/p>\n
\u0415\u0441\u043b\u0438 \u043c\u044b \u0434\u043e\u0432\u0435\u0440\u0438\u043c\u0441\u044f \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438, \u0442\u043e Angular \u0434\u043e\u043b\u0436\u0435\u043d \u0441\u0430\u043c \u043e\u0442\u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0430\u0441, \u043d\u043e \u0432 \u0440\u0430\u0431\u043e\u0442\u0435 \u044d\u0442\u043e\u0433\u043e \u043d\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441\u0442\u043e\u0438\u0442 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e: <\/p>\n
export class TestComponent {   constructor(private route: ActivatedRoute, private router: Router) { }    ngOnInit() {     this.route.params.subscribe(console.log);     this.route.queryParams.subscribe(console.log);     this.route.fragment.subscribe(console.log);     this.route.data.subscribe(console.log);     this.route.url.subscribe(console.log);          this.router.events.subscribe(console.log);   }    ngOnDestroy() {     \/\/ \u0422\u0443\u0442 \u043e\u0442\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c\u0441\u044f   } } <\/code><\/pre>\n
3.\u0420\u0435\u043d\u0434\u0435\u0440\u0435\u0440<\/strong><\/p>\n
export class TestComponent { constructor(private renderer: Renderer2,              private element : ElementRef) { }    ngOnInit() {     this.clickSubscription = this.renderer.listen(this.element.nativeElement, \"click\", handler);   }    ngOnDestroy() {     \/\/ \u0422\u0443\u0442 \u043e\u0442\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c\u0441\u044f   } } <\/code><\/pre>\n
4.\u0411\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u044b\u0435 \u043e\u0431\u043e\u0437\u0440\u0435\u0432\u0430\u0435\u043c\u044b\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438<\/strong><\/p>\n
\u0422\u0430\u043a\u0438\u0435 \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u0430 interval()<\/code> \u0438\u043b\u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043b\u0443\u0448\u0430\u0442\u044c \u043a\u0430\u043a\u043e\u0435-\u043b\u0438\u0431\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e fromEvent():<\/code><\/p>\n
export class TestComponent {    constructor(private element : ElementRef) { }    interval: Subscription;   click: Subscription;    ngOnInit() {     this.intervalSubscription = Observable.interval(1000).subscribe(console.log);     this.clickSubscription = Observable.fromEvent(this.element.nativeElement, 'click').subscribe(console.log);   }    ngOnDestroy() {     \/\/ \u0422\u0443\u0442 \u043e\u0442\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c\u0441\u044f   } }  <\/code><\/pre>\n
5.ngRx<\/strong><\/p>\n
\u041e\u0442 \u043f\u043e\u0434\u043f\u0438\u0441\u043e\u043a \u043d\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 Store ngRx \u0442\u0430\u043a\u0436\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043e\u0442\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c\u0441\u044f:<\/p>\n
export class TestComponent {    constructor(private store: Store) { }    todos: Subscription;    ngOnInit() {      this.todosSubscription = this.store.select('todos').subscribe(console.log);     }    ngOnDestroy() {     \/\/ \u0422\u0443\u0442 \u043e\u0442\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c\u0441\u044f   } } <\/code><\/pre>\n
\u041e\u0442\u043f\u0438\u0441\u043a\u0430 \u043d\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 Async pipe, @HostListener \u0438 \u043a\u043e\u043d\u0435\u0447\u043d\u044b\u043c\u0438 \u043e\u0431\u043e\u0437\u0440\u0435\u0432\u0430\u0435\u043c\u044b\u043c\u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044f\u043c\u0438.<\/p>\n
1.Async pipe <\/strong><\/p>\n
\u0422\u0443\u0442 \u0432\u0441\u044f \u0440\u0430\u0431\u043e\u0442\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0437\u0430 \u043d\u0430\u0441, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043b\u0438\u0448\u044c \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u043e\u0442\u043e\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435:<\/p>\n
@Component({   selector: 'test',   template: `<todos [todos]=\"todos$ | async\"><\/todos>` }) export class TestComponent {    constructor(private store: Store) { }    ngOnInit() {      this.todos$ = this.store.select('todos');   } } <\/code><\/pre>\n
2.@HostListener<\/strong><\/p>\n
\u041a\u043e\u0433\u0434\u0430 \u043d\u0430\u0432\u0435\u0441\u0438\u043b\u0438 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e HostListener, \u043e\u0442\u043f\u0438\u0441\u043a\u0430 \u0442\u0430\u043a\u0436\u0435 \u043d\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f:<\/p>\n
export class TestDirective {    @HostListener('click')   onClick() {     ....   } } <\/code><\/pre>\n
3.\u041a\u043e\u043d\u0435\u0447\u043d\u044b\u0435 \u043e\u0431\u043e\u0437\u0440\u0435\u0432\u0430\u0435\u043c\u044b\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438<\/strong><\/p>\n
\u0415\u0441\u0442\u044c \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u0430\u0432\u0435\u0440\u0448\u0430\u0442\u0441\u044f \u0441\u0430\u043c\u0438, \u0438 \u043d\u0435 \u0431\u0443\u0434\u0443\u0442 \u0443\u043f\u043e\u0442\u0440\u0435\u0431\u043b\u044f\u0442\u044c \u0434\u0440\u0430\u0433\u043e\u0446\u0435\u043d\u043d\u044b\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u043f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e.<\/p>\n
\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440: timer (), HTTP<\/code>:<\/p>\n
export class TestComponent {    constructor(private http: Http) { }    ngOnInit() {     Observable.timer(1000).subscribe(console.log);     this.http.get('http:\/\/api.com').subscribe(console.log);   } } <\/code><\/pre>\n
\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u043f\u043e\u043d\u044f\u0442\u043d\u0430. \u0420\u0435\u0448\u0435\u043d\u0438\u044f \u0435\u0441\u0442\u044c.<\/strong><\/p>\n
\u0418\u0442\u0430\u043a, \u043a\u043e\u0433\u0434\u0430 \u043d\u0430\u0434\u043e, \u0430 \u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u043d\u0430\u0434\u043e \u043c\u044b \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043b\u0438\u0441\u044c. \u041d\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0433\u043b\u0430\u0432\u043d\u044b\u0439 \u0432\u043e\u043f\u0440\u043e\u0441: \u0430 \u043a\u0430\u043a?<\/p>\n
\u0411\u044b\u043b\u043e \u0431\u044b \u043d\u0435\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u0434\u0430\u0432\u0430\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e, \u043d\u043e \u043d\u0435 \u0434\u0430\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043f\u043e \u0443\u043d\u0438\u0447\u0442\u043e\u0436\u0435\u043d\u0438\u044e. \u0422\u0435\u043f\u0435\u0440\u044c \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c\u0441\u044f \u043a\u0430\u043a \u043e\u0442\u043f\u0438\u0441\u0430\u0442\u044c\u0441\u044f \u043e\u0442 \u043f\u043e\u0442\u043e\u043a\u0430. \u0412 \u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c, \u0447\u0442\u043e \u043e\u0442\u043f\u0438\u0441\u043a\u0430 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u0440\u0438 \u0443\u043d\u0438\u0447\u0442\u043e\u0436\u0435\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0442\u043e \u0435\u0441\u0442\u044c, \u043a\u043e\u0433\u0434\u0430 \u043e\u043d \u043f\u0440\u0435\u043a\u0440\u0430\u0449\u0430\u0435\u0442 \u0441\u0432\u043e\u044e \u0440\u0430\u0431\u043e\u0442\u0443 \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u043c\u044b \u0443\u0436\u0435 \u043d\u0435 \u0436\u0434\u0435\u043c \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u043e\u0442 \u043d\u0435\u0433\u043e. \u041e\u0442\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c\u0441\u044f \u0432 \u0445\u0443\u043a\u0435 onDestroy<\/p>\n
\u0421\u0430\u043c\u044b\u0439 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e, \u0432 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043f\u043e\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0430, \u0430 \u043f\u0440\u0438 \u0443\u043d\u0438\u0447\u0442\u043e\u0436\u0435\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0442 \u043d\u0435\u0435 \u043e\u0442\u043f\u0438\u0441\u0430\u0442\u044c\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043a\u043b\u0430\u0441\u0441\u0430:<\/p>\n
@Component() export class ManualComponent implements OnInit, OnDestroy {   private subscription = Subscription.EMPTY;    ngOnInit() {     this.subscription = interval(1000).subscribe(observer('manual'));   }    ngOnDestroy(): void {     this.subscription.unsubscribe();   } } <\/code><\/pre>\n
\u0414\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043d\u0435\u043f\u043b\u043e\u0445\u043e\u0439, \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431. \u0423\u0448\u0435\u043b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043e\u0442\u043f\u0438\u0441\u0430\u043b\u0438\u0441\u044c \u043e\u0442 \u043f\u043e\u0442\u043e\u043a\u0430. \u041d\u043e \u0432\u0435\u0434\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0440\u0435\u0434\u043a\u043e \u0443\u043c\u0435\u0449\u0430\u044e\u0442\u0441\u044f \u0432 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u043e\u0442\u043e\u043a\u043e\u0432 \u0438 \u043b\u043e\u0433\u0438\u043a\u0430 \u043f\u043e\u0440\u044f\u0434\u043a\u043e\u043c \u0431\u043e\u043b\u044c\u0448\u0435, \u0430 \u0437\u043d\u0430\u0447\u0438\u0442, \u0435\u0441\u043b\u0438 \u043f\u043e\u0434\u043f\u0438\u0441\u043e\u043a \u043c\u043d\u043e\u0433\u043e, \u0442\u043e \u043c\u044b \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u0431\u0443\u0434\u0435\u043c \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u043e\u0442\u043f\u0438\u0441\u043a\u0438 \u0432 onDestroy. \u042d\u0442\u043e \u043d\u0435\u043a\u0440\u0430\u0441\u0438\u0432\u043e, \u0434\u0430 \u0438 \u0441\u0438\u043b \u043c\u043d\u043e\u0433\u043e \u0443\u0439\u0434\u0435\u0442 \u0447\u0442\u043e\u0431\u044b \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c.<\/p>\n
\u0418\u0434\u0435\u043c \u0434\u0430\u043b\u044c\u0448\u0435.<\/p>\n
\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043c\u0430\u0441\u0441\u0438\u0432, \u043a\u0443\u0434\u0430 \u043f\u0440\u043e\u0441\u0442\u043e \u0431\u0443\u0434\u0435\u043c \u043f\u0443\u0448\u0438\u0442\u044c \u043d\u043e\u0432\u0443\u044e \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0443, \u0430 \u043f\u0440\u0438 \u0443\u043d\u0438\u0447\u0442\u043e\u0436\u0435\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0443\u0434\u0430\u043b\u0438\u043c \u0432\u0441\u0435 \u0441\u043a\u043e\u043f\u043e\u043c:<\/p>\n
@Component({\u2026}) export class ManualComponent implements OnInit, OnDestroy {     subscription1$: Subscription;      subscription2$: Subscription;      subscriptions: Subscription[] = [];     ngOnInit () {         this.subscription1$ = Rx.Observable.interval(1000).subscribe(x => console.log(\"From interval 1000\" x));         this.subscription2$ = Rx.Observable.interval(400).subscribe(x => console.log(\"From interval 400\" x));         this.subscriptions.push(this.subscription1$);         this.subscriptions.push(this.subscription2$);     }         ngOnDestroy() {         this.subscriptions.forEach((subscription) => subscription.unsubscribe());     } } <\/code><\/pre>\n
\u0423\u0436\u0435 \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u043b\u0443\u0447\u0448\u0435, \u0438 \u043a\u043e\u0434 \u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0441\u044f \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u0447\u0438\u0449\u0435, \u043d\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0437\u0430\u0439\u0442\u0438 \u0434\u0430\u043b\u044c\u0448\u0435 \u0441 \u044d\u0442\u0438\u043c \u043c\u0435\u0442\u043e\u0434\u043e\u043c:<\/p>\n
@Component({\u2026}) export class ManualComponent implements OnInit, OnDestroy {     subscription = new Subscription();      ngOnInit () {          this.subscription.add(interval(900).subscribe(observer('add 1')));      this.subscription.add(interval(1200).subscribe(observer('add 2')));     }         ngOnDestroy() {         this.subscription.unsubscribe();     } } <\/code><\/pre>\n
\u0418\u0437\u0431\u0430\u0432\u0438\u043b\u0438\u0441\u044c \u043e\u0442 \u043b\u0438\u0448\u043d\u0438\u0445 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445, \u0446\u0438\u043a\u043b\u043e\u0432, \u0438 \u0432\u0441\u0435\u0433\u043e \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0433\u043e, \u0447\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043e\u0447\u0435\u043d\u044c \u0438\u0437\u0431\u044b\u0442\u043e\u0447\u043d\u043e. \u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0435 \u0442\u0430\u043a \u0443\u0436 \u0438 \u043b\u0435\u043d\u044c \u0432\u0441\u0435 \u044d\u0442\u043e \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0438 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0443\u0432\u0435\u0440\u0435\u043d\u043d\u044b\u043c, \u0447\u0442\u043e \u043f\u0430\u043c\u044f\u0442\u044c \u043d\u0438\u043a\u0443\u0434\u0430 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u0430\u0440\u044f\u0442\u044c\u0441\u044f.<\/p>\n
\u041e\u0434\u043d\u0430\u043a\u043e \u043c\u044b \u043d\u0430 \u044d\u0442\u043e\u043c \u043d\u0435 \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c\u0441\u044f, \u044d\u0442\u043e \u0434\u0430\u043b\u0435\u043a\u043e \u043d\u0435 \u043f\u0440\u0435\u0434\u0435\u043b. \u0417\u0430\u043a\u0440\u044b\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u043d\u043e\u0441\u0442\u0438 \u044d\u0442\u0438 \u043c\u0435\u0442\u043e\u0434\u044b \u043c\u043e\u0433\u0443\u0442, \u043e\u0434\u043d\u0430\u043a\u043e \u043c\u044b \u043f\u043e\u0439\u0434\u0435\u043c \u043f\u043e \u0431\u043e\u043b\u0435\u0435 \u044d\u043b\u0435\u0433\u0430\u043d\u0442\u043d\u043e\u043c\u0443 \u043f\u0443\u0442\u0438 \u0438 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u043f\u043e\u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0435\u0435.<\/p>\n
\u041e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u044b \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 RxJs, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u0446\u0435\u043b\u044f\u0445 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f \u043f\u043e\u0442\u043e\u043a\u0430, \u043a\u043e\u0433\u0434\u0430 \u043d\u0430\u043c \u044d\u0442\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e:<\/p>\n
\u041c\u0435\u0442\u043e\u0434\u044b <\/strong>take(n), first, takeWhile, takeUntil<\/code><\/p>\n
\u041d\u0430\u0447\u043d\u0435\u043c \u0441 take(n)<\/code>, \u0438 \u0432\u043d\u0430\u0447\u0430\u043b\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c:<\/p>\n
\u0441onst intervalCount = interval(1000); const takeFive = intervalCount.pipe(take(5)); takeFive.subscribe(x => console.log(x));<\/code><\/pre>\n
\u0422\u0443\u0442 \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e \u0432\u0438\u0434\u043d\u043e, \u0447\u0442\u043e \u0432 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f \u0447\u0438\u0441\u043b\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u0434\u0430\u044e\u0449\u0435\u0435 \u0435\u043c\u0443 \u043f\u043e\u043d\u044f\u0442\u044c, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u043f\u0440\u043e\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0447\u0435\u0440\u0435\u0437 \u0441\u0435\u0431\u044f, \u043f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u0437\u0430\u0432\u0435\u0440\u0448\u0438\u0442\u044c \u043f\u043e\u0442\u043e\u043a. \u0414\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0443\u0434\u043e\u0431\u043d\u043e, \u0432\u0435\u0434\u044c \u043c\u044b \u0443\u0436\u0435 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0445\u0443\u043a onDestroy.<\/p>\n
\u041e\u0434\u043d\u0430\u043a\u043e \u0441 \u044d\u0442\u0438\u043c \u043d\u0435 \u0432\u0441\u0435 \u0442\u0430\u043a \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e \u043a\u0430\u043a \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u043d\u0430 \u043f\u0435\u0440\u0432\u044b\u0439 \u0432\u0437\u0433\u043b\u044f\u0434, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u0438\u0437 \u0447\u0435\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u044d\u0442\u043e\u0442 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 \u0432\u043d\u0443\u0442\u0440\u0438:<\/p>\n
export function take<T>(count: number): MonoTypeOperatorFunction<T> {   return (source: Observable<T>) => {     if (count === 0) {       return empty();     } else {       return source.lift(new TakeOperator(count));     }   }; }<\/code><\/pre>\n
\u0422\u0443\u0442 \u043c\u044b \u0432\u0438\u0434\u0438\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e count, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0440\u043e\u043f\u0443\u0441\u0442\u0438\u0442\u044c. \u0414\u0430\u043b\u0435\u0435 \u0435\u0441\u043b\u0438, \u0443\u0441\u043b\u043e\u0432\u0438\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u043e, \u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u043f\u0440\u043e\u0448\u043b\u043e \u0447\u0435\u0440\u0435\u0437 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440, \u043d\u0430\u0448 \u043f\u043e\u0442\u043e\u043a \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f.<\/p>\n
\u0410 \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u0432\u043e\u0442 \u0442\u0430\u043a\u043e\u0439 \u0432\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n
from([1, 2, 3])     .pipe(         filter(value => false),         take(1)     ).subscribe(console.log) <\/code><\/pre>\n
take(n)<\/code> \u0432\u0441\u0435\u0433\u0434\u0430 \u043e\u0436\u0438\u0434\u0430\u0435\u0442, \u0447\u0442\u043e \u0447\u0435\u0440\u0435\u0437 \u043d\u0435\u0433\u043e \u043f\u0440\u043e\u0439\u0434\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u0438 \u043f\u043e\u0441\u043b\u0435 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u043e\u043d \u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u0442 \u043e\u0442\u043f\u0438\u0441\u043a\u0443 \u0438 \u0437\u0430\u0432\u0435\u0440\u0448\u0438\u0442 \u043f\u0440\u043e\u0446\u0435\u0441\u0441. \u041e\u0434\u043d\u0430\u043a\u043e \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u043f\u0440\u0438\u043b\u0435\u0442\u0438\u0442 \u0432 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440, \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u0443\u0442\u0435\u0447\u043a\u0430 \u043f\u0430\u043c\u044f\u0442\u0438. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u0441\u0435\u0433\u0434\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u043b\u0435\u0434\u0438\u0442\u044c, \u0447\u0442\u043e\u0431\u044b \u043f\u0435\u0440\u0435\u0434 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u043e\u043c \u043d\u0435 \u0441\u0442\u043e\u044f\u043b\u043e \u043d\u0438\u0433\u0434\u0435 \u0444\u0438\u043b\u044c\u0442\u0440\u0430 \u0438\u043b\u0438 \u0440\u0435\u0434\u044e\u0441\u0435\u0440\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044e\u0442 false \u0438\u043b\u0438 \u043f\u0443\u0441\u0442\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435.<\/p>\n
\u041c\u0435\u0442\u043e\u0434 <\/strong>takeWhile(predicate)<\/code><\/p>\n
\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0438\u043c \u043d\u0435 \u0441\u043b\u043e\u0436\u043d\u043e, \u0438 \u0435\u0441\u043b\u0438 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0443\u0441\u043b\u043e\u0432\u0438\u0435,<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-345415","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/345415","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=345415"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/345415\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=345415"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=345415"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=345415"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}