{"id":470347,"date":"2025-08-12T03:00:35","date_gmt":"2025-08-12T03:00:35","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=470347"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=470347","title":{"rendered":"<span>\u0418\u0441\u0442\u043e\u0440\u0438\u044f \u043e\u0434\u043d\u043e\u0433\u043e \u0431\u0430\u0433\u0430<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/25b\/225\/f52\/25b225f5204f6912de7068a8b27b4134.png\" width=\"1050\" height=\"598\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/25b\/225\/f52\/25b225f5204f6912de7068a8b27b4134.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/25b\/225\/f52\/25b225f5204f6912de7068a8b27b4134.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u041f\u043e\u0436\u0430\u043b\u0443\u0439, \u0441\u0430\u043c\u044b\u0435 \u043d\u0435\u043f\u0440\u0438\u044f\u0442\u043d\u044b\u0435 \u0431\u0430\u0433\u0438 \u2013 \u0442\u0435, \u0447\u0442\u043e \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u044f\u0442\u0441\u044f \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u0438\u0437 \u0441\u0442\u0430. \u0418\u0445 \u043d\u0435 \u043f\u043e\u0449\u0443\u043f\u0430\u0442\u044c, \u043d\u0435 \u043f\u0440\u043e\u0434\u0435\u0431\u0430\u0436\u0438\u0442\u044c \u0438 \u0434\u0430\u0436\u0435 \u043d\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442. <\/p>\n<p>\u0422\u0430\u043a \u0438 \u0442\u0443\u0442 \u043f\u0440\u0438\u043b\u0435\u0442\u0430\u0435\u0442 \u043c\u043d\u0435 \u0431\u0430\u0433 \u043e\u0442 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0449\u0438\u043a\u0430 \u0441 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u043c:<\/p>\n<blockquote>\n<p>\u041a\u043e\u043d\u0442\u0435\u043d\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0443\u0435\u0437\u0436\u0430\u0435\u0442 \u0432\u043b\u0435\u0432\u043e \u0438 \u0441\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0437\u0430 \u043f\u0430\u043d\u0435\u043b\u044c\u044e \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438. \u041a\u0430\u043a \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0441\u0442\u0438 \u043d\u0435 \u0437\u043d\u0430\u044e, \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437 \u0432 \u0434\u0435\u043d\u044c, \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c \u043d\u0435 \u0432\u044b\u044f\u0432\u043b\u0435\u043d\u0430.<\/p>\n<\/blockquote>\n<p>\u0423 \u043c\u0435\u043d\u044f, \u0435\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u043d\u0438 \u0440\u0430\u0437\u0443 \u043d\u0435 \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u043b\u043e\u0441\u044c. \u041d\u0443 \u0438 \u043a\u0430\u043a \u0441 \u044d\u0442\u0438\u043c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c?<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/294\/3d8\/755\/2943d87554399ffe9760939fbea52ae5.png\" alt=\"\u0411\u043e\u043b\u044c\u0448\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0432\u0438\u0434\u0436\u0435\u0442\u0430 \u0441\u043a\u0440\u044b\u0442\u0430 \u0437\u0430 \u043f\u0430\u043d\u0435\u043b\u044c\u044e \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438. \u041f\u0430\u043d\u0435\u043b\u044c \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u0430, \u043d\u0435 \u0441\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f.\" title=\"\u0411\u043e\u043b\u044c\u0448\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0432\u0438\u0434\u0436\u0435\u0442\u0430 \u0441\u043a\u0440\u044b\u0442\u0430 \u0437\u0430 \u043f\u0430\u043d\u0435\u043b\u044c\u044e \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438. \u041f\u0430\u043d\u0435\u043b\u044c \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u0430, \u043d\u0435 \u0441\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f.\" width=\"1503\" height=\"622\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/294\/3d8\/755\/2943d87554399ffe9760939fbea52ae5.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/294\/3d8\/755\/2943d87554399ffe9760939fbea52ae5.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u0411\u043e\u043b\u044c\u0448\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0432\u0438\u0434\u0436\u0435\u0442\u0430 \u0441\u043a\u0440\u044b\u0442\u0430 \u0437\u0430 \u043f\u0430\u043d\u0435\u043b\u044c\u044e \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438. \u041f\u0430\u043d\u0435\u043b\u044c \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u0430, \u043d\u0435 \u0441\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f.<\/figcaption><\/div>\n<\/figure>\n<div class=\"floating-image\">\n<p>\u041d\u0435\u0442, \u044f, \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u0438\u0437\u0443\u0447\u0438\u043b \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442, \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u043b, \u043a\u0430\u043a\u043e\u0439 \u0441\u0442\u0438\u043b\u044c \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043b\u0435\u0432\u043e\u0439 \u043f\u0430\u043d\u0435\u043b\u0438, \u043d\u043e \u0432\u043e\u0442 \u0442\u043e, \u0447\u0442\u043e \u044f \u0443\u0432\u0438\u0434\u0435\u043b, \u043d\u0430\u0433\u043e\u043d\u044f\u043b\u043e \u0433\u0440\u0443\u0441\u0442\u044c \u0438 \u0442\u043e\u0441\u043a\u0443. \u0417\u0430 \u0440\u0430\u0441\u0447\u0435\u0442 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438\u0437 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 Angular Material. \u0410 \u0442\u0435\u043f\u0435\u0440\u044c \u0432\u0438\u0448\u0435\u043d\u043a\u0430 \u043d\u0430 \u0442\u043e\u0440\u0442\u0435: \u043f\u0440\u043e\u0435\u043a\u0442 \u043b\u0435\u0433\u0430\u0441\u0438; \u0442\u0430\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f Angular 11. \u041e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0432\u0435\u0440\u0441\u0438\u0438 \u043d\u0435 \u043e\u0431\u0441\u0443\u0436\u0434\u0430\u0435\u0442\u0441\u044f (\u0434\u0435\u043d\u0435\u0433 \u043d\u0435\u0442, \u043d\u043e \u0432\u044b\u2026 \u043f\u043e\u043d\u044f\u043b\u0438). <\/p>\n<\/div>\n<p>\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u043b \u044f \u043d\u0430 \u044d\u0442\u043e \u0434\u0435\u043b\u043e \u0438 \u0441\u0434\u0435\u043b\u0430\u043b \u0441\u0430\u043c\u043e\u0435 \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u043e\u0435 \u0437\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435: <\/p>\n<blockquote>\n<p>\u0411\u0430\u0433 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0439 \u043f\u0430\u043d\u0435\u043b\u0438 \u0438\u0437 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 Angular Material, \u043b\u0435\u0447\u0438\u0442\u0441\u044f \u043f\u043e\u0432\u044b\u0448\u0435\u043d\u0438\u0435\u043c \u0432\u0435\u0440\u0441\u0438\u0438, \u043d\u043e, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 \u043d\u0430 \u044d\u0442\u043e \u043d\u0435\u0442, \u0442\u043e \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u043d\u0430\u043c \u0436\u0438\u0442\u044c \u0441 \u044d\u0442\u0438\u043c \u0431\u0430\u0433\u043e\u043c. \u0411\u043b\u0430\u0433\u043e, \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u043e\u043d \u0440\u0435\u0434\u043a\u043e \u0438 \u043b\u0435\u0447\u0438\u0442\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u044b\u043c \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. <\/p>\n<\/blockquote>\n<p>\u041e\u0442\u0432\u0435\u0442 \u043e\u0447\u0435\u043d\u044c \u043a\u0440\u0430\u0441\u0438\u0432\u044b\u0439, \u043d\u043e <em>\u043f\u043e\u0447\u0435\u043c\u0443-\u0442\u043e<\/em> \u043e\u043d \u043d\u0435 \u0443\u0441\u0442\u0440\u043e\u0438\u043b \u043d\u0430\u0447\u0430\u043b\u044c\u0441\u0442\u0432\u043e. \u0422\u044f\u043d\u0443\u043b \u044f \u0441 \u044d\u0442\u0438\u043c \u0431\u0430\u0433\u043e\u043c, \u043d\u0430\u0432\u0435\u0440\u043d\u043e\u0435, \u043c\u0435\u0441\u044f\u0446, \u0430 \u043a\u0430\u0436\u0434\u0443\u044e \u043d\u0435\u0434\u0435\u043b\u044e \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0449\u0438\u043a \u043f\u0440\u0438\u0431\u0435\u0433\u0430\u043b \u043a\u043e \u043c\u043d\u0435 \u0438 \u0440\u0430\u0434\u043e\u0441\u0442\u043d\u043e \u0433\u043e\u0432\u043e\u0440\u0438\u043b, \u0447\u0442\u043e \u0441\u043d\u043e\u0432\u0430 \u0435\u0433\u043e \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u043b, \u0438 \u043d\u0430\u0447. \u0434\u0435\u043f\u0430\u0440\u0442\u0430\u043c\u0435\u043d\u0442\u0430 \u0442\u043e\u0436\u0435 \u0440\u0430\u0437 \u0432 \u043d\u0435\u0434\u0435\u043b\u044e \u0441\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u043b, \u043a\u043e\u0433\u0434\u0430 \u0436\u0435 \u044f \u0441 \u044d\u0442\u0438\u043c \u0431\u0430\u0433\u043e\u043c \u0440\u0430\u0437\u0431\u0435\u0440\u0443\u0441\u044c. \u0418 \u0432\u043e\u043e\u0431\u0449\u0435, \u043c\u043e\u043b, \u043f\u043e\u0447\u0435\u043c\u0443 \u043d\u0430 \u0434\u0440\u0443\u0433\u0438\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u0445 \u0432\u0441\u0435 \u0445\u043e\u0440\u043e\u0448\u043e, \u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0442\u0430\u043a\u0430\u044f \u0444\u0438\u0433\u043d\u044f (\u044d\u0445, \u0437\u043d\u0430\u0442\u044c \u0431\u044b \u0441\u0430\u043c\u043e\u043c\u0443\u2026 \u041d\u0443, \u043a\u0430\u043a \u0432\u0430\u0440\u0438\u0430\u043d\u0442, \u0434\u0440\u0443\u0433\u0438\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u0440\u043e\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0440\u0435\u0436\u0435, \u0430 \u0431\u0430\u0433 \u0438 \u0442\u0430\u043a \u0440\u0435\u0434\u043a\u0438\u0439, \u0432\u043e\u0442 \u0438 \u043d\u0435 \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u043b\u0441\u044f \u043e\u043d \u043d\u0430 \u0434\u0440\u0443\u0433\u0438\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u0445).<\/p>\n<p>\u041c\u043e\u0433 \u0431\u044b \u044f \u0442\u0430\u043a \u043e\u0442\u043c\u043e\u0440\u0430\u0436\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0438 \u0434\u043e\u043b\u044c\u0448\u0435, \u043d\u043e \u0442\u0443\u0442 \u043c\u043d\u0435 \u0432\u0434\u0440\u0443\u0433 \u0443\u0434\u0430\u0440\u0438\u043b\u043e \u0432 \u0433\u043e\u043b\u043e\u0432\u0443: <\/p>\n<blockquote>\n<p>\u00ab<em>\u042f \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442 \u0438\u043b\u0438\u00a0\u043a\u0442\u043e?<\/em>\u00bb \u00ab<em>\u0415\u0441\u043b\u0438 \u043d\u0435\u00a0\u044f, \u0442\u043e \u043a\u0442\u043e?<\/em>\u00bb \u00ab<em>\u041d\u0435\u0443\u0436\u0435\u043b\u0438 \u044f \u0440\u0435\u0430\u043b\u044c\u043d\u043e \u043d\u0435\u00a0\u043c\u043e\u0433\u0443 \u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c\u0441\u044f \u0441\u00a0\u043a\u0430\u043a\u0438\u043c\u2011\u0442\u043e \u0432\u0448\u0438\u0432\u044b\u043c \u0431\u0430\u0433\u043e\u043c?<\/em>\u00bb. <\/p>\n<\/blockquote>\n<p>\u041a\u043e\u0440\u043e\u0447\u0435, \u043f\u0440\u043e\u043a\u0430\u0447\u0430\u043b \u043c\u043e\u0442\u0438\u0432\u0430\u0446\u0438\u044e \u0438 \u0441\u0435\u043b \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c\u0441\u044f. \u0418 \u0442\u0430\u043a \u043c\u043d\u0435 \u044d\u0442\u043e \u043f\u043e\u043d\u0440\u0430\u0432\u0438\u043b\u043e\u0441\u044c, \u0447\u0442\u043e \u0440\u0435\u0448\u0438\u043b \u043f\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430\u043c \u0440\u0430\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f \u0437\u0430\u043f\u0438\u043b\u0438\u0442\u044c \u0441\u0432\u043e\u044e \u043f\u0435\u0440\u0432\u0443\u044e \u0441\u0442\u0430\u0442\u044c\u044e \u043d\u0430 \u0425\u0430\u0431\u0440\u0435. <\/p>\n<h3>1.\u00a0\u041e\u0446\u0435\u043d\u043a\u0430 \u0434\u0438\u0441\u043f\u043e\u0437\u0438\u0446\u0438\u0438<\/h3>\n<p>\u0418\u0442\u0430\u043a, \u043f\u0435\u0440\u0432\u043e\u0435, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043d\u044f\u0442\u044c: \u043a\u0430\u043a\u043e\u0439 \u0441\u0442\u0438\u043b\u044c \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0442\u0430\u043a\u043e\u0435 \u00ab\u043a\u0440\u0438\u0432\u043e\u0435\u00bb \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435. <\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/463\/cff\/b2d\/463cffb2d11e6d405c5e4f257c6e95ee.png\" alt=\"\u041a\u043e\u0433\u0434\u0430 \u0432\u0441\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e, \u043e\u0442\u0441\u0442\u0443\u043f \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c 227px\" title=\"\u041a\u043e\u0433\u0434\u0430 \u0432\u0441\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e, \u043e\u0442\u0441\u0442\u0443\u043f \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c 227px\" width=\"1460\" height=\"224\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/463\/cff\/b2d\/463cffb2d11e6d405c5e4f257c6e95ee.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/463\/cff\/b2d\/463cffb2d11e6d405c5e4f257c6e95ee.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u041a\u043e\u0433\u0434\u0430 \u0432\u0441\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e, \u043e\u0442\u0441\u0442\u0443\u043f \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c 227px<\/figcaption><\/div>\n<\/figure>\n<p>\u0410\u0433\u0430, \u0432\u043e\u0442 \u043e\u043d, \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 <code>mat-sidenav-content<\/code> \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f <code>margin-left<\/code>. \u041e\u043d \u0432\u044b\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0438 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c <code>227px<\/code>, \u043d\u043e \u0438\u043d\u043e\u0433\u0434\u0430 (\u043e\u0447\u0435\u043d\u044c \u0440\u0435\u0434\u043a\u043e) \u0442\u0430\u043c \u0441\u0442\u0430\u0432\u0438\u0442\u0441\u044f <code>14px<\/code>, \u0447\u0442\u043e \u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443.<\/p>\n<p><em>\u041a\u0442\u043e \u0436\u0435 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0440\u0430\u0441\u0447\u0435\u0442 \u0448\u0438\u0440\u0438\u043d\u044b \u0438 \u043a\u0430\u043a \u043e\u043d\u0430 \u0432\u044b\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f?<\/em><\/p>\n<p>\u041a\u0442\u043e \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u2013 \u043f\u043e\u043d\u044f\u0442\u043d\u043e, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>sidenav <\/code>\u0438\u0437 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 Angular Material. \u0410 \u0432\u043e\u0442 \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043d\u044f\u0442\u044c, \u043a\u0430\u043a \u0432\u044b\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f, \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0439\u0442\u0438 \u043d\u0430 \u0433\u0438\u0442\u0445\u0430\u0431 \u0438 \u0438\u0437\u0443\u0447\u0438\u0442\u044c \u043a\u043e\u0434. <\/p>\n<p><em>\u0428\u0442\u043e\u0448, \u043f\u043e\u0439\u0434\u0435\u043c.<\/em><\/p>\n<h3>2.\u00a0\u0418\u0434\u0435\u043c \u0432 \u0440\u0430\u0437\u0432\u0435\u0434\u043a\u0443<\/h3>\n<p>\u041d\u0430\u0448\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043b\u0435\u0436\u0438\u0442 <a href=\"https:\/\/github.com\/angular\/components\/tree\/11.2.3\/src\/material\/sidenav\" rel=\"noopener noreferrer nofollow\">\u0437\u0434\u0435\u0441\u044c <\/a>(\u0441\u0441\u044b\u043b\u043a\u0430 \u0441\u0440\u0430\u0437\u0443 \u043d\u0430 \u0432\u0435\u0440\u0441\u0438\u044e 11, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435). <\/p>\n<p>\u0412 \u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c, \u0438\u0437\u0443\u0447\u0438\u043c <code>mat-sidenav-content<\/code>, \u0432\u0435\u0434\u044c \u0438\u043c\u0435\u043d\u043d\u043e \u043e\u043d \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439 \u0441\u0442\u0438\u043b\u044c. <\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/405\/a54\/8dd\/405a548dd8e6bdd59761a2eea964218e.png\" alt=\"\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 mat-sidenav-content \u0432 \u0444\u0430\u0439\u043b\u0435 sidenav.ts\" title=\"\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 mat-sidenav-content \u0432 \u0444\u0430\u0439\u043b\u0435 sidenav.ts\" width=\"662\" height=\"447\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/405\/a54\/8dd\/405a548dd8e6bdd59761a2eea964218e.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/405\/a54\/8dd\/405a548dd8e6bdd59761a2eea964218e.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>mat-sidenav-content<\/code> \u0432 \u0444\u0430\u0439\u043b\u0435 <code>sidenav.ts<\/code><\/figcaption><\/div>\n<\/figure>\n<p>\u0421\u0440\u0430\u0437\u0443 \u0432\u0438\u0434\u0438\u043c, \u0433\u0434\u0435 \u044d\u0442\u043e\u0442 \u0441\u0442\u0438\u043b\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f:<\/p>\n<pre><code class=\"php\">  host: {     'class': 'mat-drawer-content mat-sidenav-content',     '[style.margin-left.px]': '_container._contentMargins.left',     '[style.margin-right.px]': '_container._contentMargins.right',   },<\/code><\/pre>\n<p>\u041e\u0442\u043b\u0438\u0447\u043d\u043e, \u0430 \u0433\u0434\u0435 \u0443 \u043d\u0430\u0441 <code>_container<\/code>? \u0412 \u044d\u0442\u043e\u043c \u043a\u043b\u0430\u0441\u0441\u0435 \u0442\u0430\u043a\u043e\u0433\u043e \u043f\u043e\u043b\u044f \u043d\u0435 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u0442\u0441\u044f, \u0437\u043d\u0430\u0447\u0438\u0442, \u043e\u043d\u043e \u0432 \u0431\u0430\u0437\u043e\u0432\u043e\u043c \u043a\u043b\u0430\u0441\u0441\u0435 <code>MatDrawerContent<\/code>. \u0418\u0434\u0435\u043c \u0442\u0443\u0434\u0430.<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/e92\/916\/dd6\/e92916dd670660435bdac91a3e6c2321.png\" alt=\"\u041e\u0431\u044b\u0447\u043d\u043e \u044f \u043d\u0435 \u0438\u0437\u0443\u0447\u0430\u044e \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a Angular, \u043d\u043e \u0442\u0443\u0442 \u043e\u0441\u043e\u0431\u044b\u0439 \u0441\u043b\u0443\u0447\u0430\u0439\" title=\"\u041e\u0431\u044b\u0447\u043d\u043e \u044f \u043d\u0435 \u0438\u0437\u0443\u0447\u0430\u044e \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a Angular, \u043d\u043e \u0442\u0443\u0442 \u043e\u0441\u043e\u0431\u044b\u0439 \u0441\u043b\u0443\u0447\u0430\u0439\" width=\"695\" height=\"569\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/e92\/916\/dd6\/e92916dd670660435bdac91a3e6c2321.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/e92\/916\/dd6\/e92916dd670660435bdac91a3e6c2321.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u041e\u0431\u044b\u0447\u043d\u043e \u044f \u043d\u0435 \u0438\u0437\u0443\u0447\u0430\u044e \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a Angular, \u043d\u043e \u0442\u0443\u0442 \u043e\u0441\u043e\u0431\u044b\u0439 \u0441\u043b\u0443\u0447\u0430\u0439<\/figcaption><\/div>\n<\/figure>\n<p>\u0412\u0438\u0434\u0438\u043c \u0442\u0430\u043c \u043d\u0430\u0448 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440:<\/p>\n<pre><code class=\"php\">@Inject(forwardRef(() =&gt; MatDrawerContainer)) public _container: MatDrawerContainer,<\/code><\/pre>\n<p>\u0421\u0443\u043f\u0435\u0440, \u0442\u0435\u043f\u0435\u0440\u044c <a href=\"https:\/\/github.com\/angular\/components\/blob\/11.2.3\/src\/material\/sidenav\/drawer.ts\" rel=\"noopener noreferrer nofollow\">\u0438\u0434\u0435\u043c <\/a>\u0432 <code>MatDrawerContainer <\/code>\u0438 \u043d\u0430\u0445\u043e\u0434\u0438\u043c \u0442\u0430\u043c \u043e\u0431\u044a\u0435\u043a\u0442 <code>_contentMargins<\/code>.<\/p>\n<pre><code class=\"typescript\">_contentMargins: {left: number | null; right: number | null} = {left: null, right: null};<\/code><\/pre>\n<p>\u0421\u043a\u0440\u0438\u043d \u043f\u0440\u0438\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0442\u044c \u043d\u0435 \u0431\u0443\u0434\u0443, \u043a\u043b\u0430\u0441\u0441 \u0431\u043e\u043b\u044c\u0448\u043e\u0439. \u041d\u0430\u0441 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u0435\u0442 <a href=\"https:\/\/github.com\/angular\/components\/blob\/5712287b2feceef6792d4e3304aa550d0f439c3d\/src\/material\/sidenav\/drawer.ts#L586\" rel=\"noopener noreferrer nofollow\">\u0441\u0442\u0440\u043e\u043a\u0430 586<\/a>.<\/p>\n<p>\u0413\u0434\u0435 \u044d\u0442\u043e\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f? \u0414\u0430 \u0432\u043e\u0442 \u0437\u0434\u0435\u0441\u044c, \u0432 \u043c\u0435\u0442\u043e\u0434\u0435 <code>updateContentMargins():<\/code><\/p>\n<pre><code class=\"typescript\">updateContentMargins() {     \/\/ 1. For drawers in `over` mode, they don't affect the content.     \/\/ 2. For drawers in `side` mode they should shrink the content. We do this by adding to the     \/\/    left margin (for left drawer) or right margin (for right the drawer).     \/\/ 3. For drawers in `push` mode the should shift the content without resizing it. We do this by     \/\/    adding to the left or right margin and simultaneously subtracting the same amount of     \/\/    margin from the other side.     let left = 0;     let right = 0;      if (this._left &amp;&amp; this._left.opened) {       if (this._left.mode == 'side') {         left += this._left._getWidth();       } else if (this._left.mode == 'push') {         const width = this._left._getWidth();         left += width;         right -= width;       }     }      if (this._right &amp;&amp; this._right.opened) {       if (this._right.mode == 'side') {         right += this._right._getWidth();       } else if (this._right.mode == 'push') {         const width = this._right._getWidth();         right += width;         left -= width;       }     }      \/\/ If either `right` or `left` is zero, don't set a style to the element. This     \/\/ allows users to specify a custom size via CSS class in SSR scenarios where the     \/\/ measured widths will always be zero. Note that we reset to `null` here, rather     \/\/ than below, in order to ensure that the types in the `if` below are consistent.     left = left || null!;     right = right || null!;      if (left !== this._contentMargins.left || right !== this._contentMargins.right) {       this._contentMargins = {left, right};        \/\/ Pull back into the NgZone since in some cases we could be outside. We need to be careful       \/\/ to do it only when something changed, otherwise we can end up hitting the zone too often.       this._ngZone.run(() =&gt; this._contentMarginChanges.next(this._contentMargins));     }   }<\/code><\/pre>\n<p>\u0412\u043d\u0438\u043c\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0447\u0438\u0442\u0430\u0435\u043c \u043a\u043e\u0434. \u0418 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438 \u0442\u043e\u0436\u0435. \u0410 \u0432\u043f\u0440\u043e\u0447\u0435\u043c, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043b\u0443\u0447\u0448\u0435 \u043f\u0440\u043e\u0434\u0435\u0431\u0430\u0436\u0438\u043c \u044d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434, \u043c\u043e\u0436\u0435\u0442, \u0447\u0442\u043e-\u0442\u043e \u043f\u043e\u0439\u043c\u0435\u043c.<\/p>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/ffe\/ec6\/bee\/ffeec6bee323b849c12f6bb17beee0c1.png\" alt=\"\u041f\u0440\u043e\u0432\u0430\u043b\u0438\u0432\u0430\u0435\u043c\u0441\u044f \u0432 _getWidth(), \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043d\u044f\u0442\u044c, \u043a\u0430\u043a \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043e\u0442\u0441\u0442\u0443\u043f\" title=\"\u041f\u0440\u043e\u0432\u0430\u043b\u0438\u0432\u0430\u0435\u043c\u0441\u044f \u0432 _getWidth(), \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043d\u044f\u0442\u044c, \u043a\u0430\u043a \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043e\u0442\u0441\u0442\u0443\u043f\" width=\"481\" height=\"100\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/ffe\/ec6\/bee\/ffeec6bee323b849c12f6bb17beee0c1.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/ffe\/ec6\/bee\/ffeec6bee323b849c12f6bb17beee0c1.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u041f\u0440\u043e\u0432\u0430\u043b\u0438\u0432\u0430\u0435\u043c\u0441\u044f \u0432 <code>_getWidth()<\/code>, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043d\u044f\u0442\u044c, \u043a\u0430\u043a \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043e\u0442\u0441\u0442\u0443\u043f<\/figcaption><\/div>\n<\/figure>\n<p>\u041d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043d\u044f\u0442\u044c, \u043a\u0430\u043a \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f left, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0438\u043c\u0435\u043d\u043d\u043e \u043e\u043d\u0430 \u043f\u043e\u0442\u043e\u043c \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043a <code>this._contentMargins.left.<\/code><\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/3bd\/c75\/104\/3bdc75104f28d7e42bf9e9d1b027e41d.png\" width=\"1524\" height=\"449\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/3bd\/c75\/104\/3bdc75104f28d7e42bf9e9d1b027e41d.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/3bd\/c75\/104\/3bdc75104f28d7e42bf9e9d1b027e41d.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u0418\u0442\u0430\u043a, \u0432\u0438\u0434\u0438\u043c, \u0447\u0442\u043e <code>left <\/code>\u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0448\u0438\u0440\u0438\u043d\u0443 \u0432\u043e\u0442 \u044d\u0442\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u043d\u0430 \u0441\u043a\u0440\u0438\u043d\u0435. \u042d\u0442\u043e, \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u043b\u043e\u0433\u0438\u0447\u043d\u043e, \u043d\u043e <em>\u043c\u043d\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u044e \u0446\u0435\u043f\u043e\u0447\u043a\u0443, \u0434\u0430\u0436\u0435 \u0435\u0451 \u043b\u043e\u0433\u0438\u0447\u043d\u044b\u0435, \u043d\u0430 \u043f\u0435\u0440\u0432\u044b\u0439 \u0432\u0437\u0433\u043b\u044f\u0434, \u0437\u0432\u0435\u043d\u044c\u044f<\/em>. \u0412\u0435\u0434\u044c \u0438 \u0431\u0430\u0433 \u0443 \u043d\u0430\u0441 \u0432 \u043e\u0431\u044b\u0447\u043d\u043e\u0439 \u0436\u0438\u0437\u043d\u0438 \u043d\u0435 \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f, \u0430 \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f, \u043c\u044b \u043d\u0435 \u0437\u043d\u0430\u0435\u043c.<\/p>\n<p>\u0412 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0434\u0435\u0431\u0430\u0433\u0430 \u043e\u0431\u0440\u0430\u0449\u0430\u044e \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u043c\u0435\u0442\u043e\u0434 <code>updateContentMargins()<\/code> \u0443 \u043d\u0430\u0441 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0442\u0440\u0438\u0436\u0434\u044b: \u043f\u0435\u0440\u0432\u044b\u0439 \u0440\u0430\u0437 \u0448\u0438\u0440\u0438\u043d\u0430 <code>0px<\/code>, \u0432\u0442\u043e\u0440\u043e\u0439 \u0440\u0430\u0437 <code>14px<\/code> (<em>\u041e\u0433\u043e, \u044d\u0442\u043e \u0436\u0435 \u0446\u0438\u0444\u0440\u0430 \u0438\u0437 \u0431\u0430\u0433\u0430! \u0427\u0442\u043e-\u0442\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0435<\/em>). \u0410 \u0442\u0440\u0435\u0442\u0438\u0439 \u0440\u0430\u0437 \u0443\u0436\u0435 <code>227px<\/code>. <\/p>\n<p>\u0418\u0442\u0430\u043a, \u0435\u0441\u0442\u044c \u043f\u0435\u0440\u0432\u044b\u0435 \u0434\u0432\u0430 \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f: <\/p>\n<blockquote>\n<p>\u0412 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u044f\u0445 \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u0431\u0430\u0433\u0430 \u043c\u0435\u0442\u043e\u0434 \u043b\u0438\u0431\u043e \u043d\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0442\u0440\u0435\u0442\u0438\u0439 \u0440\u0430\u0437, \u043b\u0438\u0431\u043e \u0432 \u043c\u043e\u043c\u0435\u043d\u0442 \u0442\u0440\u0435\u0442\u044c\u0435\u0433\u043e \u0432\u044b\u0437\u043e\u0432\u0430 \u0448\u0438\u0440\u0438\u043d\u0430 \u0432\u0441\u0435 \u0435\u0449\u0435 <code>14px<\/code>. <\/p>\n<\/blockquote>\n<p>\u041d\u0443 \u0447\u0442\u043e \u0436, \u043f\u043e\u0439\u0434\u0435\u043c \u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043f\u043e \u0441\u0442\u0435\u043a\u0442\u0440\u0435\u0439\u0441\u0443, \u043e\u0442\u043a\u0443\u0434\u0430 \u0438\u0434\u0443\u0442 \u0432\u044b\u0437\u043e\u0432\u044b. <\/p>\n<p>\u041f\u0435\u0440\u0432\u044b\u0439 \u0440\u0430\u0437 \u0438\u0437 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430, \u0432\u0442\u043e\u0440\u043e\u0439 \u0440\u0430\u0437 \u0438\u0437 \u043c\u0435\u0442\u043e\u0434\u0430 <code>ngAfterContentInit()<\/code>, \u0442\u0440\u0435\u0442\u0438\u0439 \u0440\u0430\u0437 \u0438\u0437 \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0438 \u043d\u0430 <code>this._doCheckSubject<\/code>. <\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/129\/588\/9b0\/1295889b0663e973d0cd86def14b1c8c.png\" alt=\"\u0417\u0430\u0431\u0435\u0433\u0430\u044f \u0432\u043f\u0435\u0440\u0435\u0434 - \u0438\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u043e\u0442 \u0443\u0447\u0430\u0441\u0442\u043e\u043a \u043a\u043e\u0434\u0430 \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0439\" title=\"\u0417\u0430\u0431\u0435\u0433\u0430\u044f \u0432\u043f\u0435\u0440\u0435\u0434 - \u0438\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u043e\u0442 \u0443\u0447\u0430\u0441\u0442\u043e\u043a \u043a\u043e\u0434\u0430 \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0439\" width=\"1193\" height=\"180\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/129\/588\/9b0\/1295889b0663e973d0cd86def14b1c8c.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/129\/588\/9b0\/1295889b0663e973d0cd86def14b1c8c.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u0417\u0430\u0431\u0435\u0433\u0430\u044f \u0432\u043f\u0435\u0440\u0435\u0434 &#8212; \u0438\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u043e\u0442 \u0443\u0447\u0430\u0441\u0442\u043e\u043a \u043a\u043e\u0434\u0430 \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0439<\/figcaption><\/div>\n<\/figure>\n<p>\u041e\u043a, \u0437\u0430\u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043b\u0438.<\/p>\n<h3>3.\u00a0\u0410 \u0447\u0442\u043e \u0442\u0430\u043c \u0443 \u0434\u0440\u0443\u0433\u0438\u0445?<\/h3>\n<p>\u0412 \u044d\u0442\u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442 \u044f \u0440\u0435\u0448\u0438\u043b \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u0432\u0441\u0451 \u043b\u0438 \u0442\u043e \u0436\u0435 \u0441\u0430\u043c\u043e\u0435 \u043d\u0430 \u0434\u0440\u0443\u0433\u0438\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u0445, \u0433\u0434\u0435 \u0431\u0430\u0433 \u043d\u0435 \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0441\u044f? \u041f\u0435\u0440\u0435\u0445\u043e\u0436\u0443 \u043d\u0430 \u0434\u0440\u0443\u0433\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u0434\u0435\u043b\u0430\u044e \u0440\u0435\u0444\u0440\u0435\u0448 \u0438 \u0443\u0434\u0438\u0432\u043b\u044f\u044e\u0441\u044c. \u041c\u0435\u0442\u043e\u0434 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0435 \u0442\u0440\u0438\u0436\u0434\u044b, \u0430 <em>\u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u043e<\/em>. <\/p>\n<p>\u041d\u0430 \u043a\u0430\u0436\u0434\u044b\u0439 change detection \u0446\u0438\u043a\u043b \u0432 Angular \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432\u044b\u0437\u043e\u0432 <code>ngDoCheck<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u0435\u043b\u0430\u0435\u0442 <code>this._doCheckSubject.next()<\/code>, \u0438 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0430 \u043d\u0430 \u044d\u0442\u043e\u0442 subject, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u043c\u0435\u0442\u043e\u0434 \u0441 \u0440\u0430\u0441\u0447\u0435\u0442\u0430\u043c\u0438. <\/p>\n<pre><code class=\"typescript\">  ngDoCheck() {     \/\/ If users opted into autosizing, do a check every change detection cycle.     if (this._autosize &amp;&amp; this._isPushed()) {       \/\/ Run outside the NgZone, otherwise the debouncer will throw us into an infinite loop.       this._ngZone.runOutsideAngular(() =&gt; this._doCheckSubject.next());     }   }<\/code><\/pre>\n<p>\u0412\u0441\u0435 \u043b\u043e\u0433\u0438\u0447\u043d\u043e, \u043d\u043e \u043f\u043e\u0447\u0435\u043c\u0443 \u0436\u0435 \u043d\u0430 \u043f\u0435\u0440\u0432\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0440\u0430\u0441\u0447\u0435\u0442\u044b \u043d\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f? \u041d\u0435\u0442 change detection \u0446\u0438\u043a\u043b\u043e\u0432? \u0418\u043b\u0438 \u043d\u0435 \u043f\u043e\u043f\u0430\u0434\u0430\u0435\u043c \u0432\u043d\u0443\u0442\u0440\u044c \u0443\u0441\u043b\u043e\u0432\u0438\u044f <code>if<\/code> \u0432 <code>ngDoCheck<\/code>? \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u043c \u0432 \u0434\u0435\u0431\u0430\u0433\u0433\u0435\u0440\u0435. <\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/e37\/c16\/75d\/e37c1675d8887da11d438a40946d513e.png\" alt=\"\u0412\u044b\u0441\u0442\u0430\u0432\u0438\u043b\u0438 \u0431\u0440\u0435\u0439\u043a\u043f\u043e\u0438\u043d\u0442 \u0438 \u0441\u0440\u0430\u0437\u0443 \u0436\u0435 \u0432 \u043d\u0435\u0433\u043e \u043f\u043e\u043f\u0430\u043b\u0438\" title=\"\u0412\u044b\u0441\u0442\u0430\u0432\u0438\u043b\u0438 \u0431\u0440\u0435\u0439\u043a\u043f\u043e\u0438\u043d\u0442 \u0438 \u0441\u0440\u0430\u0437\u0443 \u0436\u0435 \u0432 \u043d\u0435\u0433\u043e \u043f\u043e\u043f\u0430\u043b\u0438\" width=\"862\" height=\"162\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/e37\/c16\/75d\/e37c1675d8887da11d438a40946d513e.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/e37\/c16\/75d\/e37c1675d8887da11d438a40946d513e.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u0412\u044b\u0441\u0442\u0430\u0432\u0438\u043b\u0438 \u0431\u0440\u0435\u0439\u043a\u043f\u043e\u0438\u043d\u0442 \u0438 \u0441\u0440\u0430\u0437\u0443 \u0436\u0435 \u0432 \u043d\u0435\u0433\u043e \u043f\u043e\u043f\u0430\u043b\u0438<\/figcaption><\/div>\n<\/figure>\n<h3>4.\u00a0\u041c\u0430\u0433\u0438\u044f \u043a\u0430\u043a\u0430\u044f-\u0442\u043e.<\/h3>\n<p>\u041a\u043e\u043d\u0435\u0447\u043d\u043e \u0436\u0435, change detection \u0446\u0438\u043a\u043b\u044b \u0435\u0441\u0442\u044c, \u043a\u0443\u0434\u0430 \u0436 \u0431\u0435\u0437 \u043d\u0438\u0445. \u0418 \u0432\u043d\u0443\u0442\u0440\u044c <code>if<\/code> \u043c\u044b \u043f\u043e\u043f\u0430\u0434\u0430\u0435\u043c, \u0438 <code>next()<\/code> \u043f\u0443\u043b\u044f\u0435\u043c. \u0422\u043e\u043b\u044c\u043a\u043e \u0432\u043e\u0442 <code>subscribe <\/code>\u043d\u0435 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442. <\/p>\n<p>\u0412\u043e\u0442 \u044d\u0442\u043e\u0442 \u043a\u043e\u0434, \u0433\u0434\u0435 \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u043e\u043f\u0430\u0441\u0442\u044c (\u043d\u043e \u043d\u0435 \u043f\u043e\u043f\u0430\u0434\u0430\u0435\u043c) \u0432 <code>subscribe<\/code>:<\/p>\n<pre><code class=\"typescript\">    \/\/ Avoid hitting the NgZone through the debounce timeout.     this._ngZone.runOutsideAngular(() =&gt; {       this._doCheckSubject.pipe(         debounceTime(10), \/\/ Arbitrary debounce time, less than a frame at 60fps         takeUntil(this._destroyed)       ).subscribe(() =&gt; this.updateContentMargins());     });<\/code><\/pre>\n<p><em>\u041a\u0430\u043a \u0442\u0430\u043a?<\/em> \u041e\u0442\u043f\u0438\u0441\u0430\u043b\u0438\u0441\u044c \u043c\u044b \u043e\u0442 \u043d\u0435\u0433\u043e, \u0447\u0442\u043e \u043b\u0438? \u041d\u0443, \u0442\u0430\u043c \u0435\u0441\u0442\u044c \u043e\u0442\u043f\u0438\u0441\u043a\u0430, \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u043c \u0431\u0440\u0435\u0439\u043a\u043f\u043e\u0438\u043d\u0442 \u043d\u0430 <code>this._destroyed.next()<\/code>. \u041e\u043d \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u043c\u0435\u0442\u043e\u0434\u0435 <code>ngOnDestroy<\/code> . \u041a\u043e\u043d\u0435\u0447\u043d\u043e \u0436\u0435, \u043c\u0435\u0442\u043e\u0434 \u043d\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f, \u0441 \u0447\u0435\u0433\u043e \u0431\u044b \u0435\u043c\u0443, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442-\u0442\u043e \u043d\u0435 \u0443\u043d\u0438\u0447\u0442\u043e\u0436\u0435\u043d.<\/p>\n<p>\u0427\u0442\u043e \u0437\u0430 \u043c\u0430\u0433\u0438\u044f \u0442\u0430\u043a\u0430\u044f? \u041a\u0430\u043a \u043a\u043e\u0434 \u043c\u043e\u0436\u0435\u0442 \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u0435 <code>next <\/code>\u0432 \u043f\u043e\u0442\u043e\u043a\u0435, \u0435\u0441\u043b\u0438 \u043e\u043d \u043d\u0430 \u044d\u0442\u043e\u0442 \u043f\u043e\u0442\u043e\u043a <em>\u043f\u043e\u0434\u043f\u0438\u0441\u0430\u043d<\/em>?<\/p>\n<blockquote>\n<p><em>\u0412 \u044d\u0442\u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442 \u044f \u043f\u043e\u043d\u044f\u043b, \u0447\u0442\u043e \u044f \u0447\u0435\u0433\u043e-\u0442\u043e \u043d\u0435 \u043f\u043e\u043d\u044f\u043b, \u043d\u043e \u043f\u043e\u043a\u0430 \u0435\u0449\u0435 \u043d\u0435 \u043f\u043e\u043d\u044f\u043b, \u0447\u0435\u0433\u043e \u0438\u043c\u0435\u043d\u043d\u043e \u044f \u043d\u0435 \u043f\u043e\u043d\u044f\u043b.<\/em><\/p>\n<\/blockquote>\n<p>\u0418\u0442\u0430\u043a, <code>next<\/code> \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c <code>doCheck<\/code>, \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e. <em>\u042d\u0442\u043e \u0444\u0430\u043a\u0442<\/em>. <br \/><code>Subscribe <\/code>\u043d\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f, <em>\u044d\u0442\u043e \u0442\u043e\u0436\u0435 \u0444\u0430\u043a\u0442<\/em>.<br \/>\u041f\u043e\u0442\u043e\u043a \u043d\u0435 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d \u0438 \u043c\u044b \u043e\u0442 \u043d\u0435\u0433\u043e \u043d\u0435 \u043e\u0442\u043f\u0438\u0441\u044b\u0432\u0430\u043b\u0438\u0441\u044c, <em>\u0438 \u044d\u0442\u043e \u0442\u043e\u0436\u0435 \u0444\u0430\u043a\u0442<\/em>. <\/p>\n<p>\u0427\u0442\u043e \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f?<\/p>\n<p>\u041d\u0430 \u0432\u0441\u044f\u043a\u0438\u0439 \u0441\u043b\u0443\u0447\u0430\u0439, \u0437\u0430\u0433\u0443\u0433\u043b\u044e (\u043e\u0441\u0432\u0435\u0436\u0443 \u0432 \u043f\u0430\u043c\u044f\u0442\u0438), \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 <code>debounceTime(10)<\/code><\/p>\n<blockquote>\n<p>debounceTime\u00a0is\u00a0an RxJS operator that delays the emission of values from an observable for a specified duration.\u00a0If a new value is emitted from the source observable before the delay time elapses, the previous value is discarded, and the timer is reset. <br \/><strong>(Gemini)<\/strong><\/p>\n<\/blockquote>\n<p>\u0422\u0430\u043a-\u0442\u0430\u043a-\u0442\u0430\u043a. <em><u>\u0415\u0441\u043b\u0438 \u043d\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 \u0434\u043e \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043f\u0440\u043e\u0439\u0434\u0435\u0442 \u0432\u0440\u0435\u043c\u044f (10\u043c\u0441 \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435), \u0442\u043e \u043f\u0440\u0435\u0436\u043d\u0435\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0431\u0440\u043e\u0448\u0435\u043d\u043e \u0438 \u0442\u0430\u0439\u043c\u0435\u0440 \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0449\u0435\u043d<\/u><\/em><u>.<\/u><\/p>\n<p>\u0417\u043d\u0430\u0447\u0438\u0442, \u0435\u0441\u043b\u0438 <em>\u043f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c<\/em>, \u0447\u0442\u043e \u043c\u044b \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c <code>next()<\/code> \u0447\u0430\u0449\u0435, \u0447\u0435\u043c \u0440\u0430\u0437 \u0432 10\u043c\u0441, \u0442\u043e <code>subscribe <\/code>\u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d. <strong>\u0411\u0438\u043d\u0433\u043e?<\/strong> \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c\u2026 <\/p>\n<h3>5.\u00a0\u0410 \u0447\u0442\u043e \u0442\u0430\u043c \u0441 \u0446\u0438\u043a\u043b\u0430\u043c\u0438?<\/h3>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u043c, \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u0442\u0430\u043c \u0432\u043e\u043e\u0431\u0449\u0435 \u0441 \u043d\u0430\u0448\u0438\u043c\u0438 \u0446\u0438\u043a\u043b\u0430\u043c\u0438. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435\u043c Angular Dev Tools, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0443\u043c\u0435\u0435\u0442 \u0438\u0445 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c. \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0437\u0430\u043f\u0438\u0441\u044c, \u0438&#8230;.<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/b52\/83f\/45a\/b5283f45ad9af77b075ec7bb0d119c6e.gif\" alt=\"\u0418\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043a\u0430\u0436\u0434\u044b\u0439 change detection \u0446\u0438\u043a\u043b \u0432 Angular\" title=\"\u0418\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043a\u0430\u0436\u0434\u044b\u0439 change detection \u0446\u0438\u043a\u043b \u0432 Angular\" width=\"1184\" height=\"692\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/b52\/83f\/45a\/b5283f45ad9af77b075ec7bb0d119c6e.gif 780w,&#10;       https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/b52\/83f\/45a\/b5283f45ad9af77b075ec7bb0d119c6e.gif 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u0418\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043a\u0430\u0436\u0434\u044b\u0439 change detection \u0446\u0438\u043a\u043b \u0432 Angular<\/figcaption><\/div>\n<\/figure>\n<p> \u0401-\u043c\u043e\u0435, \u0441\u043e\u0442\u043d\u0438 \u0438\u043b\u0438 \u0442\u044b\u0441\u044f\u0447\u0438 \u0446\u0438\u043a\u043b\u043e\u0432 \u0432 \u0441\u0435\u043a\u0443\u043d\u0434\u0443. \u041d\u0438\u043a\u0443\u0434\u0430 \u043d\u0435 \u0433\u043e\u0434\u0438\u0442\u0441\u044f, <strong><em>\u0447\u0442\u043e \u0437\u0430 \u0444\u0438\u0433\u043d\u044f \u0432\u043e\u043e\u0431\u0449\u0435<\/em><\/strong>?<\/p>\n<p>\u041d\u0430 \u0432\u0441\u044f\u043a\u0438\u0439 \u0441\u043b\u0443\u0447\u0430\u0439 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u044e \u0434\u0440\u0443\u0433\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443. \u041d\u0443, \u0437\u0434\u0435\u0441\u044c \u0432\u0441\u0435 \u043d\u043e\u0440\u043c, 1-2 \u0446\u0438\u043a\u043b\u0430 \u0432 \u0441\u0435\u043a\u0443\u043d\u0434\u0443. \u041d\u0435 \u0441\u0443\u043f\u0435\u0440, \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u043d\u043e \u0434\u043b\u044f \u043b\u0435\u0433\u0430\u0441\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c <code>onPush<\/code> \u0441\u0442\u043e\u0438\u0442 \u0447\u0435\u0440\u0435\u0437 \u043f\u0435\u043d\u044c-\u043a\u043e\u043b\u043e\u0434\u0443 \u2013 \u043d\u043e\u0440\u043c.<\/p>\n<p>\u0418\u0442\u0430\u043a, \u043a\u0430\u0436\u0435\u0442\u0441\u044f, \u044f \u043d\u0430\u0448\u0435\u043b \u043f\u0440\u0438\u0447\u0438\u043d\u0443, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043d\u0430\u0448\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043d\u0435 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u0442\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 \u0443 \u043b\u0435\u0432\u043e\u0439 \u043f\u0430\u043d\u0435\u043b\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0448\u0438\u0440\u0438\u043d\u0430. \u0415\u0441\u043b\u0438 \u043a\u0440\u0430\u0442\u043a\u043e, \u0442\u043e \u0446\u0435\u043f\u043e\u0447\u043a\u0430 \u0442\u0430\u043a\u0430\u044f:<\/p>\n<ol>\n<li>\n<p>\u0428\u0438\u0440\u0438\u043d\u0430 \u043e\u0442\u0441\u0442\u0443\u043f\u0430 \u043f\u0435\u0440\u0435\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0435 \u043d\u0430 <code>_doCheckSubject<\/code>\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 <code>sidenav<\/code> \u0432 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435 <code>Angular Material<\/code>.<\/p>\n<\/li>\n<li>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>sidenav <\/code>\u043d\u0430 \u043a\u0430\u0436\u0434\u044b\u0439 change detection \u0446\u0438\u043a\u043b \u044d\u043c\u0438\u0442\u0438\u0442 <code>next() <\/code>\u0434\u043b\u044f <code>_doCheckSubject<\/code>.<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0434\u043f\u0438\u0441\u043a\u0430 \u043d\u0430 <code>_doCheckSubject<\/code> \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442, \u0435\u0441\u043b\u0438 \u043c\u0435\u0436\u0434\u0443 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u043c \u0438 \u0442\u0435\u043a\u0443\u0449\u0438\u043c \u044d\u043c\u0438\u0442\u043e\u043c \u043f\u0440\u043e\u0448\u043b\u043e \u0431\u043e\u043b\u0435\u0435 10\u043c\u0441.<\/p>\n<\/li>\n<li>\n<p>\u041d\u0430 \u043d\u0430\u0448\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0431\u043e\u043b\u0435\u0435 100 \u0446\u0438\u043a\u043b\u043e\u0432 \u0432 \u0441\u0435\u043a\u0443\u043d\u0434\u0443, \u0447\u0442\u043e \u043d\u0435 \u0434\u0430\u0435\u0442 \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0435 \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c.<\/p>\n<\/li>\n<\/ol>\n<p>\u041a\u0441\u0442\u0430\u0442\u0438, \u0430 \u043f\u043e\u0447\u0435\u043c\u0443 \u0443 \u043b\u0435\u0432\u043e\u0439 \u043f\u0430\u043d\u0435\u043b\u0438 \u0432\u043e\u043e\u0431\u0449\u0435 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0448\u0438\u0440\u0438\u043d\u0430? \u041e\u0442\u0432\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u043e\u0439, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0441\u043f\u0438\u0441\u043e\u043a \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0438\u0437 \u0441\u0435\u0440\u0432\u0438\u0441\u0430 \u043f\u043e \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0435, \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u0430\u044f, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0448\u0438\u0440\u0438\u043d\u0430 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0443\u0436\u0435 \u043f\u043e\u0441\u043b\u0435 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043b\u0435\u0432\u043e\u0433\u043e \u043c\u0435\u043d\u044e. <\/p>\n<p>\u0418 \u043a\u0441\u0442\u0430\u0442\u0438, \u044d\u0442\u043e \u0434\u0430\u0435\u0442 \u043e\u0442\u0432\u0435\u0442 \u043d\u0430 \u0432\u043e\u043f\u0440\u043e\u0441, \u043f\u043e\u0447\u0435\u043c\u0443 \u0431\u0430\u0433 \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u043d\u0435\u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e. \u041f\u0440\u0438\u0447\u0438\u043d\u0430 \u0432 <code><abbr class=\"habraabbr\" title=\"Race Condition (\u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0433\u043e\u043d\u043a\u0438) \u2014 \u044d\u0442\u043e \u043e\u0448\u0438\u0431\u043a\u0430, \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u044e\u0449\u0430\u044f \u0432 \u043c\u043d\u043e\u0433\u043e\u043f\u043e\u0442\u043e\u0447\u043d\u044b\u0445 \u0438\u043b\u0438 \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0445 \u0441\u0438\u0441\u0442\u0435\u043c\u0430\u0445, \u043a\u043e\u0433\u0434\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0442\u043e\u0433\u043e, \u0432 \u043a\u0430\u043a\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435 \u043f\u043e\u0442\u043e\u043a\u0438 \u0438\u043b\u0438 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0442 \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043e\u0431\u0449\u0438\u043c \u0434\u0430\u043d\u043d\u044b\u043c.\" data-title=\"&lt;p&gt;Race Condition (\u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0433\u043e\u043d\u043a\u0438) \u2014 \u044d\u0442\u043e \u043e\u0448\u0438\u0431\u043a\u0430, \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u044e\u0449\u0430\u044f \u0432 \u043c\u043d\u043e\u0433\u043e\u043f\u043e\u0442\u043e\u0447\u043d\u044b\u0445 \u0438\u043b\u0438 \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0445 \u0441\u0438\u0441\u0442\u0435\u043c\u0430\u0445, \u043a\u043e\u0433\u0434\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0442\u043e\u0433\u043e, \u0432 \u043a\u0430\u043a\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435 \u043f\u043e\u0442\u043e\u043a\u0438 \u0438\u043b\u0438 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0442 \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043e\u0431\u0449\u0438\u043c \u0434\u0430\u043d\u043d\u044b\u043c.  &lt;\/p&gt;\" data-abbr=\"race condition\">race condition<\/abbr><\/code>: \u043b\u0438\u0431\u043e \u0441\u0435\u0440\u0432\u0438\u0441 \u0443\u0441\u043f\u0435\u0435\u0442 \u043e\u0442\u0434\u0430\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0434\u043e \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u0440\u0430\u0441\u043a\u0440\u0443\u0442\u0438\u0442\u0441\u044f \u043a\u0430\u0440\u0443\u0441\u0435\u043b\u044c \u0441 \u0446\u0438\u043a\u043b\u0430\u043c\u0438 (\u0438 \u043c\u0435\u0442\u043e\u0434 <code>updateContentMargins()<\/code> \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u0432\u0430\u043d \u0442\u0440\u0435\u0442\u0438\u0439 \u0440\u0430\u0437 \u0441 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u043c\u0438 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430\u043c\u0438), \u043b\u0438\u0431\u043e \u043d\u0435 \u0443\u0441\u043f\u0435\u0435\u0442.<\/p>\n<p>\u041d\u0443 \u0432\u0441\u0451, \u043f\u043e\u0439\u0434\u0435\u043c \u0438\u0441\u043a\u0430\u0442\u044c \u0443\u0442\u0435\u0447\u043a\u0443 \u0441 \u0446\u0438\u043a\u043b\u0430\u043c\u0438.<\/p>\n<h3>6.\u00a0\u041f\u0435\u0440\u0435\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u043a\u0440\u0430\u043d\u0438\u043a.<\/h3>\n<p>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 Angular Dev Tools \u043d\u0435 \u0434\u0430\u043b \u043d\u0430\u043c \u043d\u0438\u043a\u0430\u043a\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438, \u043a\u0442\u043e \u0436\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u0432\u0441\u0435 \u044d\u0442\u0438 \u0446\u0438\u043a\u043b\u044b, \u043f\u043e\u0439\u0434\u0435\u043c \u043d\u0430 \u0432\u043a\u043b\u0430\u0434\u043a\u0443 Performance \u0438 \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043a\u0430\u0442\u044c \u0442\u0430\u043c. \u041f\u0430\u0440\u044b \u0441\u0435\u043a\u0443\u043d\u0434 \u0437\u0430\u043f\u0438\u0441\u0438 \u043d\u0430\u043c \u0432\u043f\u043e\u043b\u043d\u0435 \u0445\u0432\u0430\u0442\u0438\u0442.<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/c1c\/84a\/830\/c1c84a83038812ca81e391d50365a49a.png\" alt=\"\u041a\u0430\u0436\u0434\u0430\u044f \u043f\u0430\u043b\u043e\u0447\u043a\u0430 - \u044d\u0442\u043e \u0432\u044b\u0437\u043e\u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438. \u041d\u0430 \u0441\u043a\u0440\u0438\u043d\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u043f\u043e\u043b\u0441\u0435\u043a\u0443\u043d\u0434\u044b.\" title=\"\u041a\u0430\u0436\u0434\u0430\u044f \u043f\u0430\u043b\u043e\u0447\u043a\u0430 - \u044d\u0442\u043e \u0432\u044b\u0437\u043e\u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438. \u041d\u0430 \u0441\u043a\u0440\u0438\u043d\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u043f\u043e\u043b\u0441\u0435\u043a\u0443\u043d\u0434\u044b.\" width=\"1261\" height=\"679\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/c1c\/84a\/830\/c1c84a83038812ca81e391d50365a49a.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/c1c\/84a\/830\/c1c84a83038812ca81e391d50365a49a.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u041a\u0430\u0436\u0434\u0430\u044f \u043f\u0430\u043b\u043e\u0447\u043a\u0430 &#8212; \u044d\u0442\u043e \u0432\u044b\u0437\u043e\u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438. \u041d\u0430 \u0441\u043a\u0440\u0438\u043d\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u043f\u043e\u043b\u0441\u0435\u043a\u0443\u043d\u0434\u044b.<\/figcaption><\/div>\n<\/figure>\n<p>\u0410 \u0442\u0430\u043c, \u043a\u0430\u043a \u0438 \u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043b\u043e \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c, \u043f\u0440\u043e\u0441\u0442\u043e \u0443\u0436\u0430\u0441. \u041a\u0430\u0436\u0434\u044b\u0435 <strong>0.5<\/strong> <strong>\u043c\u0438\u043b\u043b\u0438<\/strong>\u0441\u0435\u043a\u0443\u043d\u0434\u044b \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0446\u0438\u043a\u043b. \u041d\u0430\u0434\u043e \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u043f\u0440\u0438\u0447\u0438\u043d\u0443. <\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/273\/33a\/12f\/27333a12fbd33d3e3d82a19264ddb9eb.png\" alt=\"Zoom in, \u043d\u0430 \u0441\u043a\u0440\u0438\u043d\u0435 \u0432\u0441\u0435\u0433\u043e \u043b\u0438\u0448\u044c 2 \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434\u044b\" title=\"Zoom in, \u043d\u0430 \u0441\u043a\u0440\u0438\u043d\u0435 \u0432\u0441\u0435\u0433\u043e \u043b\u0438\u0448\u044c 2 \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434\u044b\" width=\"892\" height=\"788\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/273\/33a\/12f\/27333a12fbd33d3e3d82a19264ddb9eb.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/273\/33a\/12f\/27333a12fbd33d3e3d82a19264ddb9eb.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>Zoom in, \u043d\u0430 \u0441\u043a\u0440\u0438\u043d\u0435 \u0432\u0441\u0435\u0433\u043e \u043b\u0438\u0448\u044c 2 \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434\u044b<\/figcaption><\/div>\n<\/figure>\n<p>\u041a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u0442\u0443\u0442 \u043b\u0435\u0441 \u0438\u0437 \u0430\u043d\u0433\u0443\u043b\u044f\u0440\u043e\u0432\u0441\u043a\u0438\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0438 \u043d\u0430\u0439\u0442\u0438 \u0447\u0442\u043e-\u0442\u043e \u0441\u043b\u043e\u0436\u043d\u043e. \u041d\u043e \u0432\u043d\u0438\u043c\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u043e\u0438\u0441\u043a \u0432\u044b\u0446\u0435\u043f\u0438\u043b \u043d\u0435\u0442\u0438\u043f\u0438\u0447\u043d\u043e\u0435 \u0434\u043b\u044f angular \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 <code>onSelectionChange<\/code>, \u0434\u0430 \u0435\u0449\u0435 \u0438 \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u0441\u043b\u0435 \u0445\u0443\u043a\u0430 <code>ngAfterContentChecked<\/code>. \u041d\u0430\u0436\u0438\u043c\u0430\u0435\u043c \u043d\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0438 \u0432\u0438\u0434\u0438\u043c, \u0432 \u043a\u0430\u043a\u043e\u043c \u043e\u043d\u0430 \u043b\u0435\u0436\u0438\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435.<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/b5b\/d70\/cd6\/b5bd70cd672813357e2efbacf315ba89.png\" alt=\"\u0412\u043a\u043b\u0430\u0434\u043a\u0430 Performance \u0432 Chrome Dev Tools, \u0435\u0441\u043b\u0438 \u0443\u043c\u0435\u0442\u044c \u0435\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f, \u043e\u0442\u043a\u0440\u043e\u0435\u0442 \u043d\u0435\u0432\u0438\u0434\u0430\u043d\u043d\u044b\u0435 \u0440\u0430\u043d\u0435\u0435 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u044b \u043e\u0442\u043b\u0430\u0434\u043a\u0438\" title=\"\u0412\u043a\u043b\u0430\u0434\u043a\u0430 Performance \u0432 Chrome Dev Tools, \u0435\u0441\u043b\u0438 \u0443\u043c\u0435\u0442\u044c \u0435\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f, \u043e\u0442\u043a\u0440\u043e\u0435\u0442 \u043d\u0435\u0432\u0438\u0434\u0430\u043d\u043d\u044b\u0435 \u0440\u0430\u043d\u0435\u0435 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u044b \u043e\u0442\u043b\u0430\u0434\u043a\u0438\" width=\"1134\" height=\"721\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/b5b\/d70\/cd6\/b5bd70cd672813357e2efbacf315ba89.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/b5b\/d70\/cd6\/b5bd70cd672813357e2efbacf315ba89.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u0412\u043a\u043b\u0430\u0434\u043a\u0430 <em>Performance <\/em>\u0432 Chrome Dev Tools, \u0435\u0441\u043b\u0438 \u0443\u043c\u0435\u0442\u044c \u0435\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f, \u043e\u0442\u043a\u0440\u043e\u0435\u0442 \u043d\u0435\u0432\u0438\u0434\u0430\u043d\u043d\u044b\u0435 \u0440\u0430\u043d\u0435\u0435 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u044b \u043e\u0442\u043b\u0430\u0434\u043a\u0438<\/figcaption><\/div>\n<\/figure>\n<p> \u041a\u0430\u0436\u0435\u0442\u0441\u044f, \u043f\u043e\u0431\u0435\u0434\u0430 \u0431\u043b\u0438\u0437\u043a\u043e! <\/p>\n<p>\u0412\u043e-\u043f\u0435\u0440\u0432\u044b\u0445, \u044d\u0442\u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043a\u0430\u043a \u0440\u0430\u0437 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d \u043d\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435. \u0412\u043e-\u0432\u0442\u043e\u0440\u044b\u0445, \u0443 \u043d\u0435\u0433\u043e \u0435\u0441\u0442\u044c \u044f\u0432\u043d\u044b\u0439 \u043a\u043e\u0441\u044f\u043a. <\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/d4e\/d4e\/e2d\/d4ed4ee2dce68dc406e2bfa5bc2794fa.png\" width=\"558\" height=\"297\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/d4e\/d4e\/e2d\/d4ed4ee2dce68dc406e2bfa5bc2794fa.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/d4e\/d4e\/e2d\/d4ed4ee2dce68dc406e2bfa5bc2794fa.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<blockquote>\n<p>\u0425\u0443\u043a <code>ngAfterContentChecked<\/code> \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u043d\u0430 \u043a\u0430\u0436\u0434\u044b\u0439 change detection \u0446\u0438\u043a\u043b. \u0410 \u0432 \u043d\u0435\u043c \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043c\u0435\u0442\u043e\u0434 <code>onSelectionChange<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 <code>setTimeout<\/code>. \u0410 <code>setTimeout<\/code> \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u043d\u043e\u0432\u044b\u0439 \u0446\u0438\u043a\u043b. <\/p>\n<\/blockquote>\n<p>\u0418\u0442\u0430\u043a, \u043d\u0430\u0439\u0434\u0435\u043d \u0437\u0430\u043c\u043a\u043d\u0443\u0442\u044b\u0439 \u043a\u0440\u0443\u0433, \u0438 \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0435\u043f\u043e\u043d\u044f\u0442\u043d\u043e, \u043a\u0430\u043a \u044d\u0442\u043e \u0432\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e \u0438 \u043d\u0435 \u0437\u0430\u0432\u0438\u0441\u0430\u043b\u043e.<\/p>\n<p>\u0414\u0430\u043b\u044c\u0448\u0435 \u0432\u0441\u0435 \u0441\u0442\u0430\u043b\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043c\u0435\u0448\u043d\u043e. \u0412 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>onSelectionChange<\/code> \u0438\u0437\u043c\u0435\u043d\u044f\u043b\u043e\u0441\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u044f <code>veryImportantUnusedField<\/code>, \u043d\u043e \u044d\u0442\u043e \u043f\u043e\u043b\u0435 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043d\u0438 \u0432 \u043a\u043b\u0430\u0441\u0441\u0435, \u043d\u0438 \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0435. <em>(\u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043f\u043e\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e\u0435)<\/em><\/p>\n<p>\u0422\u0430\u043a \u0447\u0442\u043e \u044f \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043d\u043e\u0448\u0443 \u0438 \u043c\u0435\u0442\u043e\u0434, \u0438 \u0445\u0443\u043a. <\/p>\n<p>\u0422\u0435\u0441\u0442\u0438\u0440\u0443\u0435\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f7e\/603\/f25\/f7e603f252a223dc3df22e503a472f98.gif\" alt=\"2 \u0446\u0438\u043a\u043b\u0430 \u0432 \u0441\u0435\u043a\u0443\u043d\u0434\u0443, \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u043b\u0443\u0447\u0448\u0435!\" title=\"2 \u0446\u0438\u043a\u043b\u0430 \u0432 \u0441\u0435\u043a\u0443\u043d\u0434\u0443, \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u043b\u0443\u0447\u0448\u0435!\" width=\"1184\" height=\"692\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f7e\/603\/f25\/f7e603f252a223dc3df22e503a472f98.gif 780w,&#10;       https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f7e\/603\/f25\/f7e603f252a223dc3df22e503a472f98.gif 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>2 \u0446\u0438\u043a\u043b\u0430 \u0432 \u0441\u0435\u043a\u0443\u043d\u0434\u0443, \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u043b\u0443\u0447\u0448\u0435!<\/figcaption><\/div>\n<\/figure>\n<p>\u041f\u0440\u0435\u043a\u0440\u0430\u0441\u043d\u043e, \u0446\u0438\u043a\u043b\u044b \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043f\u0440\u0438\u0448\u043b\u0438 \u0432 \u043d\u043e\u0440\u043c\u0443. \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u044e, \u0447\u0442\u043e \u043d\u0430 \u043a\u0430\u0436\u0434\u044b\u0439 \u0446\u0438\u043a\u043b \u0432\u044b\u0437\u043e\u0432\u0430\u0435\u0442\u0441\u044f \u043c\u0435\u0442\u043e\u0434 \u043f\u0435\u0440\u0435\u0441\u0447\u0435\u0442\u0430 \u0448\u0438\u0440\u0438\u043d\u044b \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 sidebar \u2014 \u0434\u0430, \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442. <\/p>\n<p>\u0418\u0442\u0430\u043a, <strong>\u043f\u043e\u0431\u0435\u0434\u0430<\/strong>. \u0421\u0442\u0440\u0430\u0448\u043d\u044b\u0439 \u0431\u0430\u0433 \u043f\u043e\u0432\u0435\u0440\u0436\u0435\u043d, \u0430 \u044f \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u044e \u0441\u0435\u0431\u0435 \u0432 \u0430\u043a\u0442\u0438\u0432 \u043e\u0434\u043d\u043e \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u043d\u0435\u043e\u0431\u044b\u0447\u043d\u044b\u0445 \u0440\u0430\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0439 \u0437\u0430 \u0441\u0432\u043e\u044e 15-\u043b\u0435\u0442\u043d\u044e\u044e \u043a\u0430\u0440\u044c\u0435\u0440\u0443 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442\u0430.<\/p>\n<p>\u0411\u0443\u0434\u0435\u0442 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e \u043e\u0431\u0441\u0443\u0434\u0438\u0442\u044c \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445 \u0434\u0440\u0443\u0433\u0438\u0435 \u0432\u0435\u0441\u0435\u043b\u044b\u0435 \u0438 \u0433\u0440\u0443\u0441\u0442\u043d\u044b\u0435 \u0431\u0430\u0433\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u0430\u043c \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u043b\u0438\u0441\u044c.<\/p>\n<p>\u042f \u0434\u043e\u043b\u0433\u043e \u0434\u0443\u043c\u0430\u043b, \u043f\u0440\u0438\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0442\u044c \u043b\u0438 \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u0441\u0432\u043e\u0439 \u0442\u0433 \u043a\u0430\u043d\u0430\u043b \u0438\u043b\u0438 \u043d\u0435\u0442, \u043d\u043e \u0440\u0435\u0448\u0438\u043b, \u0447\u0442\u043e \u0432\u0441\u0435 \u0436\u0435 <a href=\"https:\/\/t.me\/+Oc39pl4hrppiZjFi\" rel=\"noopener noreferrer nofollow\">\u043f\u043e\u0434\u0435\u043b\u044e\u0441\u044c<\/a>. \u041c\u043e\u0436\u0435\u0442, \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u043c\u043e\u0442\u0438\u0432\u0430\u0446\u0438\u044f \u0447\u0430\u0449\u0435 \u0442\u0443\u0434\u0430 \u043f\u0438\u0441\u0430\u0442\u044c \ud83d\ude42<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/935972\/\"> https:\/\/habr.com\/ru\/articles\/935972\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<figure class=\"full-width\"><\/figure>\n<p>\u041f\u043e\u0436\u0430\u043b\u0443\u0439, \u0441\u0430\u043c\u044b\u0435 \u043d\u0435\u043f\u0440\u0438\u044f\u0442\u043d\u044b\u0435 \u0431\u0430\u0433\u0438 \u2013 \u0442\u0435, \u0447\u0442\u043e \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u044f\u0442\u0441\u044f \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u0438\u0437 \u0441\u0442\u0430. \u0418\u0445 \u043d\u0435 \u043f\u043e\u0449\u0443\u043f\u0430\u0442\u044c, \u043d\u0435 \u043f\u0440\u043e\u0434\u0435\u0431\u0430\u0436\u0438\u0442\u044c \u0438 \u0434\u0430\u0436\u0435 \u043d\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442. <\/p>\n<p>\u0422\u0430\u043a \u0438 \u0442\u0443\u0442 \u043f\u0440\u0438\u043b\u0435\u0442\u0430\u0435\u0442 \u043c\u043d\u0435 \u0431\u0430\u0433 \u043e\u0442 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0449\u0438\u043a\u0430 \u0441 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u043c:<\/p>\n<blockquote>\n<p>\u041a\u043e\u043d\u0442\u0435\u043d\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0443\u0435\u0437\u0436\u0430\u0435\u0442 \u0432\u043b\u0435\u0432\u043e \u0438 \u0441\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0437\u0430 \u043f\u0430\u043d\u0435\u043b\u044c\u044e \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438. \u041a\u0430\u043a \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0441\u0442\u0438 \u043d\u0435 \u0437\u043d\u0430\u044e, \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437 \u0432 \u0434\u0435\u043d\u044c, \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c \u043d\u0435 \u0432\u044b\u044f\u0432\u043b\u0435\u043d\u0430.<\/p>\n<\/blockquote>\n<p>\u0423 \u043c\u0435\u043d\u044f, \u0435\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u043d\u0438 \u0440\u0430\u0437\u0443 \u043d\u0435 \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u043b\u043e\u0441\u044c. \u041d\u0443 \u0438 \u043a\u0430\u043a \u0441 \u044d\u0442\u0438\u043c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c?<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u0411\u043e\u043b\u044c\u0448\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0432\u0438\u0434\u0436\u0435\u0442\u0430 \u0441\u043a\u0440\u044b\u0442\u0430 \u0437\u0430 \u043f\u0430\u043d\u0435\u043b\u044c\u044e \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438. \u041f\u0430\u043d\u0435\u043b\u044c \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u0430, \u043d\u0435 \u0441\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f.<\/figcaption><\/div>\n<\/figure>\n<div class=\"floating-image\">\n<p>\u041d\u0435\u0442, \u044f, \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u0438\u0437\u0443\u0447\u0438\u043b \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442, \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u043b, \u043a\u0430\u043a\u043e\u0439 \u0441\u0442\u0438\u043b\u044c \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043b\u0435\u0432\u043e\u0439 \u043f\u0430\u043d\u0435\u043b\u0438, \u043d\u043e \u0432\u043e\u0442 \u0442\u043e, \u0447\u0442\u043e \u044f \u0443\u0432\u0438\u0434\u0435\u043b, \u043d\u0430\u0433\u043e\u043d\u044f\u043b\u043e \u0433\u0440\u0443\u0441\u0442\u044c \u0438 \u0442\u043e\u0441\u043a\u0443. \u0417\u0430 \u0440\u0430\u0441\u0447\u0435\u0442 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438\u0437 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 Angular Material. \u0410 \u0442\u0435\u043f\u0435\u0440\u044c \u0432\u0438\u0448\u0435\u043d\u043a\u0430 \u043d\u0430 \u0442\u043e\u0440\u0442\u0435: \u043f\u0440\u043e\u0435\u043a\u0442 \u043b\u0435\u0433\u0430\u0441\u0438; \u0442\u0430\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f Angular 11. \u041e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0432\u0435\u0440\u0441\u0438\u0438 \u043d\u0435 \u043e\u0431\u0441\u0443\u0436\u0434\u0430\u0435\u0442\u0441\u044f (\u0434\u0435\u043d\u0435\u0433 \u043d\u0435\u0442, \u043d\u043e \u0432\u044b\u2026 \u043f\u043e\u043d\u044f\u043b\u0438). <\/p>\n<\/div>\n<p>\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u043b \u044f \u043d\u0430 \u044d\u0442\u043e \u0434\u0435\u043b\u043e \u0438 \u0441\u0434\u0435\u043b\u0430\u043b \u0441\u0430\u043c\u043e\u0435 \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u043e\u0435 \u0437\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435: <\/p>\n<blockquote>\n<p>\u0411\u0430\u0433 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0439 \u043f\u0430\u043d\u0435\u043b\u0438 \u0438\u0437 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 Angular Material, \u043b\u0435\u0447\u0438\u0442\u0441\u044f \u043f\u043e\u0432\u044b\u0448\u0435\u043d\u0438\u0435\u043c \u0432\u0435\u0440\u0441\u0438\u0438, \u043d\u043e, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 \u043d\u0430 \u044d\u0442\u043e \u043d\u0435\u0442, \u0442\u043e \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u043d\u0430\u043c \u0436\u0438\u0442\u044c \u0441 \u044d\u0442\u0438\u043c \u0431\u0430\u0433\u043e\u043c. \u0411\u043b\u0430\u0433\u043e, \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u043e\u043d \u0440\u0435\u0434\u043a\u043e \u0438 \u043b\u0435\u0447\u0438\u0442\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u044b\u043c \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. <\/p>\n<\/blockquote>\n<p>\u041e\u0442\u0432\u0435\u0442 \u043e\u0447\u0435\u043d\u044c \u043a\u0440\u0430\u0441\u0438\u0432\u044b\u0439, \u043d\u043e <em>\u043f\u043e\u0447\u0435\u043c\u0443-\u0442\u043e<\/em> \u043e\u043d \u043d\u0435 \u0443\u0441\u0442\u0440\u043e\u0438\u043b \u043d\u0430\u0447\u0430\u043b\u044c\u0441\u0442\u0432\u043e. \u0422\u044f\u043d\u0443\u043b \u044f \u0441 \u044d\u0442\u0438\u043c \u0431\u0430\u0433\u043e\u043c, \u043d\u0430\u0432\u0435\u0440\u043d\u043e\u0435, \u043c\u0435\u0441\u044f\u0446, \u0430 \u043a\u0430\u0436\u0434\u0443\u044e \u043d\u0435\u0434\u0435\u043b\u044e \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0449\u0438\u043a \u043f\u0440\u0438\u0431\u0435\u0433\u0430\u043b \u043a\u043e \u043c\u043d\u0435 \u0438 \u0440\u0430\u0434\u043e\u0441\u0442\u043d\u043e \u0433\u043e\u0432\u043e\u0440\u0438\u043b, \u0447\u0442\u043e \u0441\u043d\u043e\u0432\u0430 \u0435\u0433\u043e \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u043b, \u0438 \u043d\u0430\u0447. \u0434\u0435\u043f\u0430\u0440\u0442\u0430\u043c\u0435\u043d\u0442\u0430 \u0442\u043e\u0436\u0435 \u0440\u0430\u0437 \u0432 \u043d\u0435\u0434\u0435\u043b\u044e \u0441\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u043b, \u043a\u043e\u0433\u0434\u0430 \u0436\u0435 \u044f \u0441 \u044d\u0442\u0438\u043c \u0431\u0430\u0433\u043e\u043c \u0440\u0430\u0437\u0431\u0435\u0440\u0443\u0441\u044c. \u0418 \u0432\u043e\u043e\u0431\u0449\u0435, \u043c\u043e\u043b, \u043f\u043e\u0447\u0435\u043c\u0443 \u043d\u0430 \u0434\u0440\u0443\u0433\u0438\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u0445 \u0432\u0441\u0435 \u0445\u043e\u0440\u043e\u0448\u043e, \u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0442\u0430\u043a\u0430\u044f \u0444\u0438\u0433\u043d\u044f (\u044d\u0445, \u0437\u043d\u0430\u0442\u044c \u0431\u044b \u0441\u0430\u043c\u043e\u043c\u0443\u2026 \u041d\u0443, \u043a\u0430\u043a \u0432\u0430\u0440\u0438\u0430\u043d\u0442, \u0434\u0440\u0443\u0433\u0438\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u0440\u043e\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0440\u0435\u0436\u0435, \u0430 \u0431\u0430\u0433 \u0438 \u0442\u0430\u043a \u0440\u0435\u0434\u043a\u0438\u0439, \u0432\u043e\u0442 \u0438 \u043d\u0435 \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u043b\u0441\u044f \u043e\u043d \u043d\u0430 \u0434\u0440\u0443\u0433\u0438\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u0445).<\/p>\n<p>\u041c\u043e\u0433 \u0431\u044b \u044f \u0442\u0430\u043a \u043e\u0442\u043c\u043e\u0440\u0430\u0436\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0438 \u0434\u043e\u043b\u044c\u0448\u0435, \u043d\u043e \u0442\u0443\u0442 \u043c\u043d\u0435 \u0432\u0434\u0440\u0443\u0433 \u0443\u0434\u0430\u0440\u0438\u043b\u043e \u0432 \u0433\u043e\u043b\u043e\u0432\u0443: <\/p>\n<blockquote>\n<p>\u00ab<em>\u042f \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442 \u0438\u043b\u0438\u00a0\u043a\u0442\u043e?<\/em>\u00bb \u00ab<em>\u0415\u0441\u043b\u0438 \u043d\u0435\u00a0\u044f, \u0442\u043e \u043a\u0442\u043e?<\/em>\u00bb \u00ab<em>\u041d\u0435\u0443\u0436\u0435\u043b\u0438 \u044f \u0440\u0435\u0430\u043b\u044c\u043d\u043e \u043d\u0435\u00a0\u043c\u043e\u0433\u0443 \u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c\u0441\u044f \u0441\u00a0\u043a\u0430\u043a\u0438\u043c\u2011\u0442\u043e \u0432\u0448\u0438\u0432\u044b\u043c \u0431\u0430\u0433\u043e\u043c?<\/em>\u00bb. <\/p>\n<\/blockquote>\n<p>\u041a\u043e\u0440\u043e\u0447\u0435, \u043f\u0440\u043e\u043a\u0430\u0447\u0430\u043b \u043c\u043e\u0442\u0438\u0432\u0430\u0446\u0438\u044e \u0438 \u0441\u0435\u043b \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c\u0441\u044f. \u0418 \u0442\u0430\u043a \u043c\u043d\u0435 \u044d\u0442\u043e \u043f\u043e\u043d\u0440\u0430\u0432\u0438\u043b\u043e\u0441\u044c, \u0447\u0442\u043e \u0440\u0435\u0448\u0438\u043b \u043f\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430\u043c \u0440\u0430\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f \u0437\u0430\u043f\u0438\u043b\u0438\u0442\u044c \u0441\u0432\u043e\u044e \u043f\u0435\u0440\u0432\u0443\u044e \u0441\u0442\u0430\u0442\u044c\u044e \u043d\u0430 \u0425\u0430\u0431\u0440\u0435. <\/p>\n<h3>1.\u00a0\u041e\u0446\u0435\u043d\u043a\u0430 \u0434\u0438\u0441\u043f\u043e\u0437\u0438\u0446\u0438\u0438<\/h3>\n<p>\u0418\u0442\u0430\u043a, \u043f\u0435\u0440\u0432\u043e\u0435, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043d\u044f\u0442\u044c: \u043a\u0430\u043a\u043e\u0439 \u0441\u0442\u0438\u043b\u044c \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0442\u0430\u043a\u043e\u0435 \u00ab\u043a\u0440\u0438\u0432\u043e\u0435\u00bb \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435. <\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u041a\u043e\u0433\u0434\u0430 \u0432\u0441\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e, \u043e\u0442\u0441\u0442\u0443\u043f \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c 227px<\/figcaption><\/div>\n<\/figure>\n<p>\u0410\u0433\u0430, \u0432\u043e\u0442 \u043e\u043d, \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 <code>mat-sidenav-content<\/code> \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f <code>margin-left<\/code>. \u041e\u043d \u0432\u044b\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0438 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c <code>227px<\/code>, \u043d\u043e \u0438\u043d\u043e\u0433\u0434\u0430 (\u043e\u0447\u0435\u043d\u044c \u0440\u0435\u0434\u043a\u043e) \u0442\u0430\u043c \u0441\u0442\u0430\u0432\u0438\u0442\u0441\u044f <code>14px<\/code>, \u0447\u0442\u043e \u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443.<\/p>\n<p><em>\u041a\u0442\u043e \u0436\u0435 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0440\u0430\u0441\u0447\u0435\u0442 \u0448\u0438\u0440\u0438\u043d\u044b \u0438 \u043a\u0430\u043a \u043e\u043d\u0430 \u0432\u044b\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f?<\/em><\/p>\n<p>\u041a\u0442\u043e \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u2013 \u043f\u043e\u043d\u044f\u0442\u043d\u043e, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>sidenav <\/code>\u0438\u0437 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 Angular Material. \u0410 \u0432\u043e\u0442 \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043d\u044f\u0442\u044c, \u043a\u0430\u043a \u0432\u044b\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f, \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0439\u0442\u0438 \u043d\u0430 \u0433\u0438\u0442\u0445\u0430\u0431 \u0438 \u0438\u0437\u0443\u0447\u0438\u0442\u044c \u043a\u043e\u0434. <\/p>\n<p><em>\u0428\u0442\u043e\u0448, \u043f\u043e\u0439\u0434\u0435\u043c.<\/em><\/p>\n<h3>2.\u00a0\u0418\u0434\u0435\u043c \u0432 \u0440\u0430\u0437\u0432\u0435\u0434\u043a\u0443<\/h3>\n<p>\u041d\u0430\u0448\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043b\u0435\u0436\u0438\u0442 <a href=\"https:\/\/github.com\/angular\/components\/tree\/11.2.3\/src\/material\/sidenav\" rel=\"noopener noreferrer nofollow\">\u0437\u0434\u0435\u0441\u044c <\/a>(\u0441\u0441\u044b\u043b\u043a\u0430 \u0441\u0440\u0430\u0437\u0443 \u043d\u0430 \u0432\u0435\u0440\u0441\u0438\u044e 11, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435). <\/p>\n<p>\u0412 \u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c, \u0438\u0437\u0443\u0447\u0438\u043c <code>mat-sidenav-content<\/code>, \u0432\u0435\u0434\u044c \u0438\u043c\u0435\u043d\u043d\u043e \u043e\u043d \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439 \u0441\u0442\u0438\u043b\u044c. <\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>mat-sidenav-content<\/code> \u0432 \u0444\u0430\u0439\u043b\u0435 <code>sidenav.ts<\/code><\/figcaption><\/div>\n<\/figure>\n<p>\u0421\u0440\u0430\u0437\u0443 \u0432\u0438\u0434\u0438\u043c, \u0433\u0434\u0435 \u044d\u0442\u043e\u0442 \u0441\u0442\u0438\u043b\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f:<\/p>\n<pre><code class=\"php\">  host: {     'class': 'mat-drawer-content mat-sidenav-content',     '[style.margin-left.px]': '_container._contentMargins.left',     '[style.margin-right.px]': '_container._contentMargins.right',   },<\/code><\/pre>\n<p>\u041e\u0442\u043b\u0438\u0447\u043d\u043e, \u0430 \u0433\u0434\u0435 \u0443 \u043d\u0430\u0441 <code>_container<\/code>? \u0412 \u044d\u0442\u043e\u043c \u043a\u043b\u0430\u0441\u0441\u0435 \u0442\u0430\u043a\u043e\u0433\u043e \u043f\u043e\u043b\u044f \u043d\u0435 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u0442\u0441\u044f, \u0437\u043d\u0430\u0447\u0438\u0442, \u043e\u043d\u043e \u0432 \u0431\u0430\u0437\u043e\u0432\u043e\u043c \u043a\u043b\u0430\u0441\u0441\u0435 <code>MatDrawerContent<\/code>. \u0418\u0434\u0435\u043c \u0442\u0443\u0434\u0430.<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u041e\u0431\u044b\u0447\u043d\u043e \u044f \u043d\u0435 \u0438\u0437\u0443\u0447\u0430\u044e \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a Angular, \u043d\u043e \u0442\u0443\u0442 \u043e\u0441\u043e\u0431\u044b\u0439 \u0441\u043b\u0443\u0447\u0430\u0439<\/figcaption><\/div>\n<\/figure>\n<p>\u0412\u0438\u0434\u0438\u043c \u0442\u0430\u043c \u043d\u0430\u0448 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440:<\/p>\n<pre><code class=\"php\">@Inject(forwardRef(() =&gt; MatDrawerContainer)) public _container: MatDrawerContainer,<\/code><\/pre>\n<p>\u0421\u0443\u043f\u0435\u0440, \u0442\u0435\u043f\u0435\u0440\u044c <a href=\"https:\/\/github.com\/angular\/components\/blob\/11.2.3\/src\/material\/sidenav\/drawer.ts\" rel=\"noopener noreferrer nofollow\">\u0438\u0434\u0435\u043c <\/a>\u0432 <code>MatDrawerContainer <\/code>\u0438 \u043d\u0430\u0445\u043e\u0434\u0438\u043c \u0442\u0430\u043c \u043e\u0431\u044a\u0435\u043a\u0442 <code>_contentMargins<\/code>.<\/p>\n<pre><code class=\"typescript\">_contentMargins: {left: number | null; right: number | null} = {left: null, right: null};<\/code><\/pre>\n<p>\u0421\u043a\u0440\u0438\u043d \u043f\u0440\u0438\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0442\u044c \u043d\u0435 \u0431\u0443\u0434\u0443, \u043a\u043b\u0430\u0441\u0441 \u0431\u043e\u043b\u044c\u0448\u043e\u0439. \u041d\u0430\u0441 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u0435\u0442 <a href=\"https:\/\/github.com\/angular\/components\/blob\/5712287b2feceef6792d4e3304aa550d0f439c3d\/src\/material\/sidenav\/drawer.ts#L586\" rel=\"noopener noreferrer nofollow\">\u0441\u0442\u0440\u043e\u043a\u0430 586<\/a>.<\/p>\n<p>\u0413\u0434\u0435 \u044d\u0442\u043e\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f? \u0414\u0430 \u0432\u043e\u0442 \u0437\u0434\u0435\u0441\u044c, \u0432 \u043c\u0435\u0442\u043e\u0434\u0435 <code>updateContentMargins():<\/code><\/p>\n<pre><code class=\"typescript\">updateContentMargins() {     \/\/ 1. For drawers in `over` mode, they don't affect the content.     \/\/ 2. For drawers in `side` mode they should shrink the content. We do this by adding to the     \/\/    left margin (for left drawer) or right margin (for right the drawer).     \/\/ 3. For drawers in `push` mode the should shift the content without resizing it. We do this by     \/\/    adding to the left or right margin and simultaneously subtracting the same amount of     \/\/    margin from the other side.     let left = 0;     let right = 0;      if (this._left &amp;&amp; this._left.opened) {       if (this._left.mode == 'side') {         left += this._left._getWidth();       } else if (this._left.mode == 'push') {         const width = this._left._getWidth();         left += width;         right -= width;       }     }      if (this._right &amp;&amp; this._right.opened) {       if (this._right.mode == 'side') {         right += this._right._getWidth();       } else if (this._right.mode == 'push') {         const width = this._right._getWidth();         right += width;         left -= width;       }     }      \/\/ If either `right` or `left` is zero, don't set a style to the element. This     \/\/ allows users to specify a custom size via CSS class in SSR scenarios where the     \/\/ measured widths will always be zero. Note that we reset to `null` here, rather     \/\/ than below, in order to ensure that the types in the `if` below are consistent.     left = left || null!;     right = right || null!;      if (left !== this._contentMargins.left || right !== this._contentMargins.right) {       this._contentMargins = {left, right};        \/\/ Pull back into the NgZone since in some cases we could be outside. We need to be careful       \/\/ to do it only when something changed, otherwise we can end up hitting the zone too often.       this._ngZone.run(() =&gt; this._contentMarginChanges.next(this._contentMargins));     }   }<\/code><\/pre>\n<p>\u0412\u043d\u0438\u043c\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0447\u0438\u0442\u0430\u0435\u043c \u043a\u043e\u0434. \u0418 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438 \u0442\u043e\u0436\u0435. \u0410 \u0432\u043f\u0440\u043e\u0447\u0435\u043c, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043b\u0443\u0447\u0448\u0435 \u043f\u0440\u043e\u0434\u0435\u0431\u0430\u0436\u0438\u043c \u044d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434, \u043c\u043e\u0436\u0435\u0442, \u0447\u0442\u043e-\u0442\u043e \u043f\u043e\u0439\u043c\u0435\u043c.<\/p>\n<figure class=\"\">\n<div><figcaption>\u041f\u0440\u043e\u0432\u0430\u043b\u0438\u0432\u0430\u0435\u043c\u0441\u044f \u0432 <code>_getWidth()<\/code>, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043d\u044f\u0442\u044c, \u043a\u0430\u043a \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043e\u0442\u0441\u0442\u0443\u043f<\/figcaption><\/div>\n<\/figure>\n<p>\u041d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043d\u044f\u0442\u044c, \u043a\u0430\u043a \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f left, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0438\u043c\u0435\u043d\u043d\u043e \u043e\u043d\u0430 \u043f\u043e\u0442\u043e\u043c \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043a <code>this._contentMargins.left.<\/code><\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u0418\u0442\u0430\u043a, \u0432\u0438\u0434\u0438\u043c, \u0447\u0442\u043e <code>left <\/code>\u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0448\u0438\u0440\u0438\u043d\u0443 \u0432\u043e\u0442 \u044d\u0442\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u043d\u0430 \u0441\u043a\u0440\u0438\u043d\u0435. \u042d\u0442\u043e, \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u043b\u043e\u0433\u0438\u0447\u043d\u043e, \u043d\u043e <em>\u043c\u043d\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u044e \u0446\u0435\u043f\u043e\u0447\u043a\u0443, \u0434\u0430\u0436\u0435 \u0435\u0451 \u043b\u043e\u0433\u0438\u0447\u043d\u044b\u0435, \u043d\u0430 \u043f\u0435\u0440\u0432\u044b\u0439 \u0432\u0437\u0433\u043b\u044f\u0434, \u0437\u0432\u0435\u043d\u044c\u044f<\/em>. \u0412\u0435\u0434\u044c \u0438 \u0431\u0430\u0433 \u0443 \u043d\u0430\u0441 \u0432 \u043e\u0431\u044b\u0447\u043d\u043e\u0439 \u0436\u0438\u0437\u043d\u0438 \u043d\u0435 \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f, \u0430 \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f, \u043c\u044b \u043d\u0435 \u0437\u043d\u0430\u0435\u043c.<\/p>\n<p>\u0412 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0434\u0435\u0431\u0430\u0433\u0430 \u043e\u0431\u0440\u0430\u0449\u0430\u044e \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u043c\u0435\u0442\u043e\u0434 <code>updateContentMargins()<\/code> \u0443 \u043d\u0430\u0441 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0442\u0440\u0438\u0436\u0434\u044b: \u043f\u0435\u0440\u0432\u044b\u0439 \u0440\u0430\u0437 \u0448\u0438\u0440\u0438\u043d\u0430 <code>0px<\/code>, \u0432\u0442\u043e\u0440\u043e\u0439 \u0440\u0430\u0437 <code>14px<\/code> (<em>\u041e\u0433\u043e, \u044d\u0442\u043e \u0436\u0435 \u0446\u0438\u0444\u0440\u0430 \u0438\u0437 \u0431\u0430\u0433\u0430! \u0427\u0442\u043e-\u0442\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0435<\/em>). \u0410 \u0442\u0440\u0435\u0442\u0438\u0439 \u0440\u0430\u0437 \u0443\u0436\u0435 <code>227px<\/code>. <\/p>\n<p>\u0418\u0442\u0430\u043a, \u0435\u0441\u0442\u044c \u043f\u0435\u0440\u0432\u044b\u0435 \u0434\u0432\u0430 \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f: <\/p>\n<blockquote>\n<p>\u0412 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u044f\u0445 \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u0431\u0430\u0433\u0430 \u043c\u0435\u0442\u043e\u0434 \u043b\u0438\u0431\u043e \u043d\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0442\u0440\u0435\u0442\u0438\u0439 \u0440\u0430\u0437, \u043b\u0438\u0431\u043e \u0432 \u043c\u043e\u043c\u0435\u043d\u0442 \u0442\u0440\u0435\u0442\u044c\u0435\u0433\u043e \u0432\u044b\u0437\u043e\u0432\u0430 \u0448\u0438\u0440\u0438\u043d\u0430 \u0432\u0441\u0435 \u0435\u0449\u0435 <code>14px<\/code>. <\/p>\n<\/blockquote>\n<p>\u041d\u0443 \u0447\u0442\u043e \u0436, \u043f\u043e\u0439\u0434\u0435\u043c \u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043f\u043e \u0441\u0442\u0435\u043a\u0442\u0440\u0435\u0439\u0441\u0443, \u043e\u0442\u043a\u0443\u0434\u0430 \u0438\u0434\u0443\u0442 \u0432\u044b\u0437\u043e\u0432\u044b. <\/p>\n<p>\u041f\u0435\u0440\u0432\u044b\u0439 \u0440\u0430\u0437 \u0438\u0437 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430, \u0432\u0442\u043e\u0440\u043e\u0439 \u0440\u0430\u0437 \u0438\u0437 \u043c\u0435\u0442\u043e\u0434\u0430 <code>ngAfterContentInit()<\/code>, \u0442\u0440\u0435\u0442\u0438\u0439 \u0440\u0430\u0437 \u0438\u0437 \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0438 \u043d\u0430 <code>this._doCheckSubject<\/code>. <\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u0417\u0430\u0431\u0435\u0433\u0430\u044f \u0432\u043f\u0435\u0440\u0435\u0434 &#8212; \u0438\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u043e\u0442 \u0443\u0447\u0430\u0441\u0442\u043e\u043a \u043a\u043e\u0434\u0430 \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0439<\/figcaption><\/div>\n<\/figure>\n<p>\u041e\u043a, \u0437\u0430\u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043b\u0438.<\/p>\n<h3>3.\u00a0\u0410 \u0447\u0442\u043e \u0442\u0430\u043c \u0443 \u0434\u0440\u0443\u0433\u0438\u0445?<\/h3>\n<p>\u0412 \u044d\u0442\u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442 \u044f \u0440\u0435\u0448\u0438\u043b \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u0432\u0441\u0451 \u043b\u0438 \u0442\u043e \u0436\u0435 \u0441\u0430\u043c\u043e\u0435 \u043d\u0430 \u0434\u0440\u0443\u0433\u0438\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u0445, \u0433\u0434\u0435 \u0431\u0430\u0433 \u043d\u0435 \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0441\u044f? \u041f\u0435\u0440\u0435\u0445\u043e\u0436\u0443 \u043d\u0430 \u0434\u0440\u0443\u0433\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u0434\u0435\u043b\u0430\u044e \u0440\u0435\u0444\u0440\u0435\u0448 \u0438 \u0443\u0434\u0438\u0432\u043b\u044f\u044e\u0441\u044c. \u041c\u0435\u0442\u043e\u0434 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0435 \u0442\u0440\u0438\u0436\u0434\u044b, \u0430 <em>\u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u043e<\/em>. <\/p>\n<p>\u041d\u0430 \u043a\u0430\u0436\u0434\u044b\u0439 change detection \u0446\u0438\u043a\u043b \u0432 Angular \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432\u044b\u0437\u043e\u0432 <code>ngDoCheck<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u0435\u043b\u0430\u0435\u0442 <code>this._doCheckSubject.next()<\/code>, \u0438 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0430 \u043d\u0430 \u044d\u0442\u043e\u0442 subject, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u043c\u0435\u0442\u043e\u0434 \u0441 \u0440\u0430\u0441\u0447\u0435\u0442\u0430\u043c\u0438. <\/p>\n<pre><code class=\"typescript\">  ngDoCheck() {     \/\/ If users opted into autosizing, do a check every change detection cycle.     if (this._autosize &amp;&amp; this._isPushed()) {       \/\/ Run outside the NgZone, otherwise the debouncer will throw us into an infinite loop.       this._ngZone.runOutsideAngular(() =&gt; this._doCheckSubject.next());     }   }<\/code><\/pre>\n<p>\u0412\u0441\u0435 \u043b\u043e\u0433\u0438\u0447\u043d\u043e, \u043d\u043e \u043f\u043e\u0447\u0435\u043c\u0443 \u0436\u0435 \u043d\u0430 \u043f\u0435\u0440\u0432\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0440\u0430\u0441\u0447\u0435\u0442\u044b \u043d\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f? \u041d\u0435\u0442 change detection \u0446\u0438\u043a\u043b\u043e\u0432? \u0418\u043b\u0438 \u043d\u0435 \u043f\u043e\u043f\u0430\u0434\u0430\u0435\u043c \u0432\u043d\u0443\u0442\u0440\u044c \u0443\u0441\u043b\u043e\u0432\u0438\u044f <code>if<\/code> \u0432 <code>ngDoCheck<\/code>? \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u043c \u0432 \u0434\u0435\u0431\u0430\u0433\u0433\u0435\u0440\u0435. <\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u0412\u044b\u0441\u0442\u0430\u0432\u0438\u043b\u0438 \u0431\u0440\u0435\u0439\u043a\u043f\u043e\u0438\u043d\u0442 \u0438 \u0441\u0440\u0430\u0437\u0443 \u0436\u0435 \u0432 \u043d\u0435\u0433\u043e \u043f\u043e\u043f\u0430\u043b\u0438<\/figcaption><\/div>\n<\/figure>\n<h3>4.\u00a0\u041c\u0430\u0433\u0438\u044f \u043a\u0430\u043a\u0430\u044f-\u0442\u043e.<\/h3>\n<p>\u041a\u043e\u043d\u0435\u0447\u043d\u043e \u0436\u0435, change detection \u0446\u0438\u043a\u043b\u044b \u0435\u0441\u0442\u044c, \u043a\u0443\u0434\u0430 \u0436 \u0431\u0435\u0437 \u043d\u0438\u0445. \u0418 \u0432\u043d\u0443\u0442\u0440\u044c <code>if<\/code> \u043c\u044b \u043f\u043e\u043f\u0430\u0434\u0430\u0435\u043c, \u0438 <code>next()<\/code> \u043f\u0443\u043b\u044f\u0435\u043c. \u0422\u043e\u043b\u044c\u043a\u043e \u0432\u043e\u0442 <code>subscribe <\/code>\u043d\u0435 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442. <\/p>\n<p>\u0412\u043e\u0442 \u044d\u0442\u043e\u0442 \u043a\u043e\u0434, \u0433\u0434\u0435 \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u043e\u043f\u0430\u0441\u0442\u044c (\u043d\u043e \u043d\u0435 \u043f\u043e\u043f\u0430\u0434\u0430\u0435\u043c) \u0432 <code>subscribe<\/code>:<\/p>\n<pre><code class=\"typescript\">    \/\/ Avoid hitting the NgZone through the debounce timeout.     this._ngZone.runOutsideAngular(() =&gt; {       this._doCheckSubject.pipe(         debounceTime(10), \/\/ Arbitrary debounce time, less than a frame at 60fps         takeUntil(this._destroyed)       ).subscribe(() =&gt; this.updateContentMargins());     });<\/code><\/pre>\n<p><em>\u041a\u0430\u043a \u0442\u0430\u043a?<\/em> \u041e\u0442\u043f\u0438\u0441\u0430\u043b\u0438\u0441\u044c \u043c\u044b \u043e\u0442 \u043d\u0435\u0433\u043e, \u0447\u0442\u043e \u043b\u0438? \u041d\u0443, \u0442\u0430\u043c \u0435\u0441\u0442\u044c \u043e\u0442\u043f\u0438\u0441\u043a\u0430, \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u043c \u0431\u0440\u0435\u0439\u043a\u043f\u043e\u0438\u043d\u0442 \u043d\u0430 <code>this._destroyed.next()<\/code>. \u041e\u043d \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u043c\u0435\u0442\u043e\u0434\u0435 <code>ngOnDestroy<\/code> . \u041a\u043e\u043d\u0435\u0447\u043d\u043e \u0436\u0435, \u043c\u0435\u0442\u043e\u0434 \u043d\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f, \u0441 \u0447\u0435\u0433\u043e \u0431\u044b \u0435\u043c\u0443, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442-\u0442\u043e \u043d\u0435 \u0443\u043d\u0438\u0447\u0442\u043e\u0436\u0435\u043d.<\/p>\n<p>\u0427\u0442\u043e \u0437\u0430 \u043c\u0430\u0433\u0438\u044f \u0442\u0430\u043a\u0430\u044f? \u041a\u0430\u043a \u043a\u043e\u0434 \u043c\u043e\u0436\u0435\u0442 \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u0435 <code>next <\/code>\u0432 \u043f\u043e\u0442\u043e\u043a\u0435, \u0435\u0441\u043b\u0438 \u043e\u043d \u043d\u0430 \u044d\u0442\u043e\u0442 \u043f\u043e\u0442\u043e\u043a <em>\u043f\u043e\u0434\u043f\u0438\u0441\u0430\u043d<\/em>?<\/p>\n<blockquote>\n<p><em>\u0412 \u044d\u0442\u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442 \u044f \u043f\u043e\u043d\u044f\u043b, \u0447\u0442\u043e \u044f \u0447\u0435\u0433\u043e-\u0442\u043e \u043d\u0435 \u043f\u043e\u043d\u044f\u043b, \u043d\u043e \u043f\u043e\u043a\u0430 \u0435\u0449\u0435 \u043d\u0435 \u043f\u043e\u043d\u044f\u043b, \u0447\u0435\u0433\u043e \u0438\u043c\u0435\u043d\u043d\u043e \u044f \u043d\u0435 \u043f\u043e\u043d\u044f\u043b.<\/em><\/p>\n<\/blockquote>\n<p>\u0418\u0442\u0430\u043a, <code>next<\/code> \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c <code>doCheck<\/code>, \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e. <em>\u042d\u0442\u043e \u0444\u0430\u043a\u0442<\/em>. <br \/><code>Subscribe <\/code>\u043d\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f, <em>\u044d\u0442\u043e \u0442\u043e\u0436\u0435 \u0444\u0430\u043a\u0442<\/em>.<br \/>\u041f\u043e\u0442\u043e\u043a \u043d\u0435 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d \u0438 \u043c\u044b \u043e\u0442 \u043d\u0435\u0433\u043e \u043d\u0435 \u043e\u0442\u043f\u0438\u0441\u044b\u0432\u0430\u043b\u0438\u0441\u044c, <em>\u0438 \u044d\u0442\u043e \u0442\u043e\u0436\u0435 \u0444\u0430\u043a\u0442<\/em>. <\/p>\n<p>\u0427\u0442\u043e \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f?<\/p>\n<p>\u041d\u0430 \u0432\u0441\u044f\u043a\u0438\u0439 \u0441\u043b\u0443\u0447\u0430\u0439, \u0437\u0430\u0433\u0443\u0433\u043b\u044e (\u043e\u0441\u0432\u0435\u0436\u0443 \u0432 \u043f\u0430\u043c\u044f\u0442\u0438), \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 <code>debounceTime(10)<\/code><\/p>\n<blockquote>\n<p>debounceTime\u00a0is\u00a0an RxJS operator that delays the emission of values from an observable for a specified duration.\u00a0If a new value is emitted from the source observable before the delay time elapses, the previous value is discarded, and the timer is reset. <br \/><strong>(Gemini)<\/strong><\/p>\n<\/blockquote>\n<p>\u0422\u0430\u043a-\u0442\u0430\u043a-\u0442\u0430\u043a. <em><u>\u0415\u0441\u043b\u0438 \u043d\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 \u0434\u043e \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043f\u0440\u043e\u0439\u0434\u0435\u0442 \u0432\u0440\u0435\u043c\u044f (10\u043c\u0441 \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435), \u0442\u043e \u043f\u0440\u0435\u0436\u043d\u0435\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0431\u0440\u043e\u0448\u0435\u043d\u043e \u0438 \u0442\u0430\u0439\u043c\u0435\u0440 \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0449\u0435\u043d<\/u><\/em><u>.<\/u><\/p>\n<p>\u0417\u043d\u0430\u0447\u0438\u0442, \u0435\u0441\u043b\u0438 <em>\u043f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c<\/em>, \u0447\u0442\u043e \u043c\u044b \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c <code>next()<\/code> \u0447\u0430\u0449\u0435, \u0447\u0435\u043c \u0440\u0430\u0437 \u0432 10\u043c\u0441, \u0442\u043e <code>subscribe <\/code>\u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d. <strong>\u0411\u0438\u043d\u0433\u043e?<\/strong> \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c\u2026 <\/p>\n<h3>5.\u00a0\u0410 \u0447\u0442\u043e \u0442\u0430\u043c \u0441 \u0446\u0438\u043a\u043b\u0430\u043c\u0438?<\/h3>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u043c, \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u0442\u0430\u043c \u0432\u043e\u043e\u0431\u0449\u0435 \u0441 \u043d\u0430\u0448\u0438\u043c\u0438 \u0446\u0438\u043a\u043b\u0430\u043c\u0438. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435\u043c Angular Dev Tools, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0443\u043c\u0435\u0435\u0442 \u0438\u0445 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c. \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0437\u0430\u043f\u0438\u0441\u044c, \u0438&#8230;.<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u0418\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043a\u0430\u0436\u0434\u044b\u0439 change detection \u0446\u0438\u043a\u043b \u0432 Angular<\/figcaption><\/div>\n<\/figure>\n<p> \u0401-\u043c\u043e\u0435, \u0441\u043e\u0442\u043d\u0438 \u0438\u043b\u0438 \u0442\u044b\u0441\u044f\u0447\u0438 \u0446\u0438\u043a\u043b\u043e\u0432 \u0432 \u0441\u0435\u043a\u0443\u043d\u0434\u0443. \u041d\u0438\u043a\u0443\u0434\u0430 \u043d\u0435 \u0433\u043e\u0434\u0438\u0442\u0441\u044f, <strong><em>\u0447\u0442\u043e \u0437\u0430 \u0444\u0438\u0433\u043d\u044f \u0432\u043e\u043e\u0431\u0449\u0435<\/em><\/strong>?<\/p>\n<p>\u041d\u0430 \u0432\u0441\u044f\u043a\u0438\u0439 \u0441\u043b\u0443\u0447\u0430\u0439 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u044e \u0434\u0440\u0443\u0433\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443. \u041d\u0443, \u0437\u0434\u0435\u0441\u044c \u0432\u0441\u0435 \u043d\u043e\u0440\u043c, 1-2 \u0446\u0438\u043a\u043b\u0430 \u0432 \u0441\u0435\u043a\u0443\u043d\u0434\u0443. \u041d\u0435 \u0441\u0443\u043f\u0435\u0440, \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u043d\u043e \u0434\u043b\u044f \u043b\u0435\u0433\u0430\u0441\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c <code>onPush<\/code> \u0441\u0442\u043e\u0438\u0442 \u0447\u0435\u0440\u0435\u0437 \u043f\u0435\u043d\u044c-\u043a\u043e\u043b\u043e\u0434\u0443 \u2013 \u043d\u043e\u0440\u043c.<\/p>\n<p>\u0418\u0442\u0430\u043a,<\/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-470347","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/470347","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=470347"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/470347\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=470347"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=470347"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=470347"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}