Início / coding / Perguntas / 79281951
Accepted
Konrad Viltersten
Asked: 2024-12-15 15:14:36 +0800 CST

Não é possível modificar o conteúdo interno de ViewContainerRef, apenas adicionar tags depois dele no Angular

  • 772

Tenho algumas DIVs que podem ser marcadas com uma diretiva special. Essa diretiva tem uma certa lógica que funciona. Agora, eu gostaria de adicionar um componente dentro da DIV que esteja equipado com a diretiva.

<div special ...>Monkey</div>
<div regular ...>Donkey</div>

Seguindo a documentação sobre como usar ViewContainerRef (sugerida por esta resposta para um problema semelhante), executo o seguinte na minha diretiva.

@Directive({ selector: "[special]" })
export class SpecialDirective {

  private viewRef = inject(ViewContainerRef); ...
  constructor() {
    const icon = this.viewRef.createComponent(IconComponent);
  }

Funciona exatamente como descrito na documentação: o ícone criado (correspondente a LeafContent) é colocado no DOM logo após o DIV que está marcado como especial (correspondente a InnerItem). E esse é precisamente o meu problema: quero que o ícone seja parte do HTML interno do DIV que é governado pela diretiva.

Não consigo mover a diretiva para dentro por vários motivos relacionados à sua lógica. Tentei acessar viewRef.elemente inspecionar outros campos e métodos dela. Sem sucesso. Definir o índice na criação não ajudou. O mais perto que cheguei foi desanexar/inserir dos documentos, mas isso só me deixou gerenciar a ordem dos elementos depois do meu DIV, não dentro dele.

Eu vi essa resposta , mas ela não vai ajudar no meu caso porque a alteração acontece depois que o usuário clica no DIV muito depois de ele ter sido criado e colocado na visualização.

Como posso alterar o interior da viewRefinstância? O ideal é remover algumas tags dentro dela também, além de alterar o ícone.

html

1 respostas

  1. Best Answer

    Como você deseja inserir o componente sem nenhum elemento filho criado, podemos usar createComponento método autônomo, que recebe a entrada do injetor de ambiente e podemos usar appendChildof Renderer2para anexar esse elemento criado ao original elementRef.

    export class InnerItem {
  constructor(
    private viewContainer: ViewContainerRef,
    private injector: Injector,
    private element: ElementRef,
    private envInjector: EnvironmentInjector,
    private renderer: Renderer2
  ) {}
  loadContent() {
    const componentRef = createComponent(LeafContent, {
      environmentInjector: this.envInjector,
    });
    this.renderer.appendChild(
      this.element.nativeElement,
      componentRef.location.nativeElement
    );
    componentRef.changeDetectorRef.detectChanges();
  }
}

    Código completo:

    import {
  Component,
  createComponent,
  ViewContainerRef,
  Injector,
  ElementRef,
  EnvironmentInjector,
  Renderer2,
} from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';

@Component({
  selector: 'leaf-content',
  template: `
    <div>This is the leaf content</div>
  `,
})
export class LeafContent {}
@Component({
  selector: 'inner-item',
  template: `
    <button (click)="loadContent()">Load content</button>
  `,
})
export class InnerItem {
  constructor(
    private viewContainer: ViewContainerRef,
    private injector: Injector,
    private element: ElementRef,
    private envInjector: EnvironmentInjector,
    private renderer: Renderer2
  ) {}
  loadContent() {
    const componentRef = createComponent(LeafContent, {
      environmentInjector: this.envInjector,
    });
    this.renderer.appendChild(
      this.element.nativeElement,
      componentRef.location.nativeElement
    );
    componentRef.changeDetectorRef.detectChanges();
  }
}
@Component({
  selector: 'outer-container',
  imports: [InnerItem],
  template: `
    <p>This is the start of the outer container</p>
    <inner-item />
    <p>This is the end of the outer container</p>
  `,
})
export class OuterContainer {}

@Component({
  selector: 'app-root',
  imports: [OuterContainer],
  template: `
    <outer-container/>
  `,
})
export class App {
  name = 'Angular';
}

bootstrapApplication(App);

    Demonstração do Stackblitz

    Você pode criar um template reference variable #insertHerepara especificar explicitamente onde inserir o novo componente, podemos usar viewChilde especificar a readpropriedade para obter o ViewContainerRefque tem o createComponentmétodo.

    @Component({
  selector: 'inner-item',
  template: `
    <button (click)="loadContent()">Load content</button>
    <ng-container #insertHere></ng-container>
  `,
})
export class InnerItem {
  insertHere = viewChild('insertHere', {
    read: ViewContainerRef,
  });
  loadContent() {
    this.insertHere()?.createComponent(LeafContent);
  }
}

    Código completo:

    import { Component, viewChild, ViewContainerRef } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';

@Component({
  selector: 'leaf-content',
  template: `
    This is the leaf content
  `,
})
export class LeafContent {}
@Component({
  selector: 'inner-item',
  template: `
    <button (click)="loadContent()">Load content</button>
    <ng-container #insertHere></ng-container>
  `,
})
export class InnerItem {
  insertHere = viewChild('insertHere', {
    read: ViewContainerRef,
  });
  loadContent() {
    this.insertHere()?.createComponent(LeafContent);
  }
}
@Component({
  selector: 'outer-container',
  imports: [InnerItem],
  template: `
    <p>This is the start of the outer container</p>
    <inner-item />
    <p>This is the end of the outer container</p>
  `,
})
export class OuterContainer {}

@Component({
  selector: 'app-root',
  imports: [OuterContainer],
  template: `
    <outer-container/>
  `,
})
export class App {
  name = 'Angular';
}

bootstrapApplication(App);

    Demonstração do Stackblitz

    • 1

relate perguntas