{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"В Angular "},{"type":"text","marks":[{"type":"code"}],"text":""},{"type":"text","text":" — это "},{"type":"text","marks":[{"type":"bold"}],"text":"элемент-шаблон"},{"type":"text","text":", который "},{"type":"text","marks":[{"type":"bold"}],"text":"сам по себе не рендерится в DOM"},{"type":"text","text":", но содержит разметку, которую Angular может вставлять в DOM "},{"type":"text","marks":[{"type":"bold"}],"text":"динамически"},{"type":"text","text":"."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Основные моменты:"}]},{"type":"orderedList","attrs":{"start":1,"type":null},"content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Ленивая загрузка/отложенный рендеринг"},{"type":"text","text":":"}]}]}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":"\n

Привет, мир!

\n\n"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"

"},{"type":"text","text":" не появится в DOM, пока шаблон не будет явно использован ("},{"type":"text","marks":[{"type":"code"}],"text":"ngTemplateOutlet"},{"type":"text","text":" или структурной директивой)."}]}]}]},{"type":"orderedList","attrs":{"start":2,"type":null},"content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Использование с "},{"type":"text","marks":[{"type":"code"}],"text":"*ngIf"},{"type":"text","marks":[{"type":"bold"}],"text":" и "},{"type":"text","marks":[{"type":"code"}],"text":"*ngFor"},{"type":"text","text":":"}]}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Angular под капотом превращает эти директивы в "},{"type":"text","marks":[{"type":"code"}],"text":""},{"type":"text","text":" для управления вставкой элементов."}]}]}]},{"type":"orderedList","attrs":{"start":3,"type":null},"content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Динамическое использование через "},{"type":"text","marks":[{"type":"code"}],"text":"ngTemplateOutlet"},{"type":"text","text":":"}]}]}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":"\n"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Вставляет содержимое шаблона в указанное место."}]}]}]},{"type":"orderedList","attrs":{"start":4,"type":null},"content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Контекстные переменные"},{"type":"text","text":":"}]}]}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":"\n

\n\n\n\n"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Позволяет передавать данные в шаблон через локальные переменные ("},{"type":"text","marks":[{"type":"code"}],"text":"let-user"},{"type":"text","text":"), включая "},{"type":"text","marks":[{"type":"code"}],"text":"$implicit"},{"type":"text","text":"."}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Иными словами, "},{"type":"text","marks":[{"type":"code"}],"text":""},{"type":"text","text":" — это "},{"type":"text","marks":[{"type":"bold"}],"text":"невидимый контейнер для разметки"},{"type":"text","text":", которую Angular может "},{"type":"text","marks":[{"type":"bold"}],"text":"создавать и вставлять динамически"},{"type":"text","text":" в зависимости от условий или данных."}]}]}

Что делает <ng-template>?

Комментарии