Предоставление входных и выходных данных
Предоставляйте входные и выходные данные хост-директивы
«Предоставление входных и выходных данных» — бесплатный урок Angular Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.
Предоставление составных API
При объединении директивы через hostDirectives её входы и выходы по умолчанию скрыты. API композиции позволяет предоставить выбранные входы и выходы в общедоступном API хоста.
Объектная форма
Вместо указания только класса используйте объект со свойствами directive, inputs и outputs, содержащими массивы.
hostDirectives: [{
directive: TooltipDirective,
inputs: ['tooltipText'],
outputs: ['tooltipShown']
}]Открытие входного параметра
Указание имени входного параметра в inputs позволяет потребителям привязывать его к элементу-хозяину.
<app-button tooltipText="Save changes"></app-button>Открытие выходного события
Указание выходного события заставляет хозяина повторно передавать события этой директивы.
<app-button (tooltipShown)="onShown()"></app-button>Переименование при открытии
Используйте форму publicName: internalName, чтобы переименовать входной параметр или выходное событие при открытии.
inputs: ['tooltipText: hint']
// consumers bind [hint]="..."Переименование выходных событий
Выходные события переименовываются таким же образом.
outputs: ['tooltipShown: shown']
// template: (shown)="..."Зачем скрывать по умолчанию?
Скрытие скомпонованных входных параметров и выходных событий сохраняет API хозяина преднамеренным. Открывайте потребителям только то, что имеет для них смысл, не раскрывая внутренние детали директив.
Сочетание с собственными входными параметрами
У хозяина могут быть собственные входные параметры наряду с открытыми; Angular объединяет их в единый публичный API элемента.
@Component({
selector: 'app-button',
hostDirectives: [{
directive: TooltipDirective,
inputs: ['tooltipText']
}]
})
export class ButtonComponent {
label = input('');
}Конфликты имён
Если имя открытого входного параметра совпадает с именем собственного входного параметра хозяина, переименование устраняет конфликт и проясняет назначение.
Двусторонние привязки
Чтобы поддержать двустороннюю привязку через композицию, откройте и входной параметр, и соответствующее ему выходное событие Change с согласованными именами.
Рекомендация
Открывайте минимальный, хорошо именованный интерфейс, необходимый потребителям. Переименовывайте внутренние имена в соответствии с терминологией компонента, а не лежащей в его основе директивы.
Быстрая проверка
Проверьте, насколько хорошо Вы понимаете открытие входных параметров и выходных событий.
Итоги
Вы узнали, что объектная форма hostDirectives открывает выбранные inputs и outputs в API хозяина, позволяет при необходимости переименовывать их с помощью publicName: internalName и сохраняет публичный интерфейс преднамеренным.
Часто задаваемые вопросы
Урок «Предоставление входных и выходных данных» бесплатный?
Да — полный текст урока «Предоставление входных и выходных данных» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.
Чему я научусь в уроке «Предоставление входных и выходных данных»?
Предоставляйте входные и выходные данные хост-директивы Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Angular Academy?
Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Предоставление входных и выходных данных»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Angular Academy?
Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Свойство hostDirectives
- Предоставление входных и выходных данных
- Создание повторно используемого поведения
- Композиция и наследование