У меня есть простой компонент с одним входом [id] и шаблон, который использует «my-directive».

<div>
    <div my-directive>
        hello world
    </div>
</div>

Simple-component будет использоваться несколько раз в шаблоне:

<simple-component [id]="1"></simple-component>
<simple-component [id]="2"></simple-component>

Могу ли я получить доступ к экземпляру simple-component из каждого экземпляра my-directive?

Цель состоит в том, чтобы каждый экземпляр my-directive знал свой простой компонентный экземпляр host / external, например, чтобы получить доступ к свойству id.

4
Hoff 13 Фев 2020 в 14:51

2 ответа

Лучший ответ

Да, есть способ доступа к родительскому компоненту с помощью модификатора разрешения @Host() (дополнительная информация по официальная документация). Основная идея состоит в том, чтобы перемещаться по дереву компонентов с помощью Dependency Injection, чтобы найти ссылку на родительский элемент из дочернего элемента. здесь есть несколько хороших примеров.

По умолчанию Angular ищет предоставленный экземпляр вверх вплоть до NullInjector (самого высокого уровня в иерархии). Если он не находит экземпляр, он генерирует исключение, если мы не используем @Optional, в этом случае он возвращает null. В вашем конкретном примере мы используем Host(), чтобы сказать Angular прекратить поиск с этим компонентом в качестве последней остановки при поиске. Нам не нужно его использовать, даже если мы опустим Host(), он все равно будет работать.

В my-directive.directive.ts файле:

constructor(@Host() private parent: SimpleComponent) {
    // here we have an instance of SimpleComponent and we can access its properties except for the Input properties, those are still not set in constructor
}

Я создал простой stackblitz пример, демонстрирующий это.

РЕДАКТИРОВАТЬ . Вот пример, где мы находим экземпляр { {X0}}, который является родителем SimpleComponent из директивы . Здесь мы не можем использовать Host(), так как поиск остановится с директивой в качестве последней остановки (и AppComponent находится выше в цепочке). Поэтому мы просто ничего не добавляем и получаем правильную ссылку.

Надеюсь это поможет.

1
miselking 14 Фев 2020 в 13:14

Вы можете достичь этого с помощью сервиса:

@Injectable()
export class IdsTrackerService {
  private ids$$: BehaviorSubject<{ [key: string]: true }> = new BehaviorSubject(
    {}
  );
  public ids$: Observable<string[]> = this.ids$$
    .asObservable()
    .pipe(map(ids => Object.keys(ids)));

  public addId(id: string): void {
    if (!this.ids$$.value[id]) {
      this.ids$$.next({
        ...this.ids$$.value,
        [id]: true
      });
    }
  }
}

Тогда в вашей директиве вам просто нужно зарегистрировать идентификатор при создании директивы и отменить ее регистрацию при уничтожении:

@Directive({
  selector: "[appTrackId]"
})
export class TrackIdDirective implements OnInit, OnDestroy {
  @Input() appTrackId: string | undefined;

  constructor(private idsTrackerService: IdsTrackerService) {}

  public ngOnInit(): void {
    if (!this.appTrackId) {
      throw new Error(`When using "appTrackId" please pass the ID as argument`);
    }

    this.idsTrackerService.addId(this.appTrackId);

    // you now also have access to
    // this.idsTrackerService.ids$ :) !
  }

  public ngOnDestroy(): void {
    this.idsTrackerService.removeId(this.appTrackId);
  }
}

Не забудьте предоставить услугу на уровне компонента , а не на уровне модуля или глобально:

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
  // declare the provider on a component basis
  // so you get a different instance of the service per component
  providers: [IdsTrackerService]
})

Демонстрационная версия с представлением отладки для отображения зарегистрированных идентификаторов. https://stackblitz.com. / редактировать / угловой jyvezk

0
maxime1992 13 Фев 2020 в 12:26