Допустим, у меня есть этот фрагмент кода
<div *appTab routerLink="..." routerLinkActive="..."></div>
Можно ли внедрить экземпляр директивы RouterLinkActive в мою директиву appTab?
Angular - ввести директиву в другую директиву для того же элемента
05.06.2019
- Да, я думаю, вы можете просто добавить его в конструктор. 05.06.2019
- @Reactgular пробовал, к сожалению, не работает.
nullInjectorError: No provider for RouterLinkActive05.06.2019 - @Reactgular routerLinkActive находится внутри структурной директивы appTab. 05.06.2019
- @LiamFleming Тогда он получит совершенно другой экземпляр директивы RouterLinkActive. 05.06.2019
- Я не уверен, какое имя класса для ссылки на маршрутизатор. Моя среда IDE сейчас не открыта, но я думал, что она называется как-то вроде RouterLinkActiveDirective. 05.06.2019
- @Reactgular
RouterLinkActive- правильное имя 05.06.2019 - Почему вы ставите перед директивой префикс
*? Является ли эта директива структурным шаблоном? 05.06.2019 - @Reactgular, да!
divбудет поднят с@ContentChildren05.06.2019 - Мне интересно, может быть, поэтому вы не можете ввести его.
<div>будет перемещен компилятором во внутренний шаблон. Попробуйте удалить*, чтобы посмотреть, работает ли инъекция. 05.06.2019 - @Reactgular пробовал, не работает. Какая жалость. 05.06.2019
- Не уверен, что это сработает:
<div #rla="routerLinkActive" [appTabRouterLinkActive]="rla" ...>, гдеappTabRouterLinkActiveбудет свойством@InputвappTab. 05.06.2019 - @ConnorsFan, к сожалению, структурные директивы, похоже, не принимают входные данные таким образом. 05.06.2019
- Вы можете попробовать реализовать свойство
@Inputс помощью метода, предложенного в этом ответе. Возможно, вам также придется внести исправление, предложенное в этом другом ответе. 05.06.2019
Ответы:
1
Было бы проще, если бы ViewContainerRefs.createEmbeddedView использовал правильный инжектор, но пока мы можем только обходной путь Это.
router-link-active-tab-connector.directive.ts
import { Directive, Input, OnInit } from '@angular/core';
import { TabDirective } from './tab.directive';
import { RouterLinkActive } from '@angular/router';
@Directive({
selector: '[routerLinkActive][routerLinkActiveTabConnector]'
})
export class RouterLinkActiveLinkerDirective implements OnInit {
@Input('routerLinkActiveTabConnector') tab: TabDirective;
constructor(private routerLinkActive: RouterLinkActive) {}
ngOnInit() {
this.tab.setRouterLinkActive(this.routerLinkActive);
}
}
tab.directive.ts
import { Directive, ViewContainerRef, TemplateRef } from '@angular/core';
import { RouterLinkActive } from '@angular/router';
@Directive({
selector: '[appTab]'
})
export class TabDirective {
constructor(private vcRef: ViewContainerRef, private templateRef: TemplateRef<any>) { }
setRouterLinkActive(routerLinkActive: RouterLinkActive) {
console.log(routerLinkActive);
// do something with RouterLinkActive directive
}
ngOnInit() {
this.vcRef.createEmbeddedView(this.templateRef, { $implicit: this});
}
}
html
<div *appTab="let tabRef"
routerLink="..."
routerLinkActive=""
[routerLinkActiveTabConnector]="tabRef">
Some content
</div>
05.06.2019
Новые материалы
Как создать диаграмму градиентной кисти с помощью D3.js
Резюме:
Из этого туториала Вы узнаете, как добавить градиентную кисть к диаграмме с областями в D3.js. Мы добавим градиент к значениям SVG и применим градиент в качестве заливки к диаграмме с..
Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что это выглядит сложно…
Просто начните и учитесь самостоятельно
Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что он кажется мне сложным, и я бросил его. Это в основном инструмент..
Лицензии с открытым исходным кодом: руководство для разработчиков и создателей
В динамичном мире разработки программного обеспечения открытый исходный код стал мощной парадигмой, способствующей сотрудничеству, инновациям и прогрессу, движимому сообществом. В основе..
Объяснение документов 02: BERT
BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка.
Во время предварительного обучения модель обучается на неразмеченных данных с помощью..
Как проанализировать работу вашего классификатора?
Не всегда просто знать, какие показатели использовать
С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..
Работа с цепями Маркова, часть 4 (Машинное обучение)
Нелинейные цепи Маркова с агрегатором и их приложения (arXiv)
Автор : Бар Лайт
Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..
Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
Как вы сегодня, ребята?
В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..