Início / coding / Perguntas / 79560758
Accepted
Marcelo de Sá
Asked: 2025-04-08 04:43:27 +0800 CST

Projeção angular com diretiva

  • 772

Estou criando modelos usando projeção em angular 18. Tenho um componente base html chamado base-list.component.html

...
<mat-drawer-content class="bg-white">
  <div class="d-flex flex-column h-100" [loading]="isLoading">
    <ng-content select="[table]"></ng-content>
  </div>
</mat-drawer-content>
...

e uma classe base BaseListComponent

@Component({
    selector: 'app-base-list',
    templateUrl: './base-list.component.html',
    standalone: true,
    imports: [
        LoadingDirective
    ]
})
export class BaseListComponent<TType> {

    protected isLoading: boolean = false
...

No componente filho tenho um html list.component.html

<app-base-list>
  <ng-container table>
    <table mat-table matSort [dataSource]="dataSource">
      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef>
          Name
        </th>
        <td mat-cell *matCellDef="let element" class="text-start">{{element.name}}</td>
      </ng-container>
    </table>
  </ng-container>
</app-base-list>

e uma classe

@Component({
    selector: 'app-lista',
    standalone: true,
    imports: [
    ],
    templateUrl: './lista.component.html',
    styleUrls: ['./lista.component.scss']
})
export class ListaComponent extends BaseListComponent<IData> implements AfterViewInit {
   ngAfterViewInit() {
        this.seacrh()
    }

    private seacrh = () => {
        this.loading = true
        ...
        this.http.get<IData[]>()
            .subscribe(resp => {
                if (resp.error) {
                    ...
                }
                else {
                    ...
                }
            });
    }

}

Se eu colocar a diretiva na página filha sem modificar o código, o carregamento aparece, mas com a diretiva no componente pai, o valor do sinalizador isLoading não muda e o carregamento não aparece.

Meu modelo tem vários outros métodos e propriedades, este é apenas um exemplo usando variáveis

É possível criar esse tipo de modelo em que o componente filho pode modificar os valores criados no modelo sem usar Emit?

angular

1 respostas

  1. Best Answer

    Por que não usar viewChild(consultas de sinal) ou @ViewChildacessar o componente filho e então modificar loading.

    export class ListaComponent extends BaseListComponent<IData> implements AfterViewInit {
   // private child = viewChild(BaseListComponent);
   @ViewChild(BaseListComponent) child: BaseListComponent;
   ngAfterViewInit() {
        this.seacrh()
    }

    private seacrh = () => {
        // this.child().loading = true;
        this.child.loading = true
        ...
        this.http.get<IData[]>()
            .subscribe(resp => {
                if (resp.error) {
                    ...
                }
                else {
                    ...
                }
            });
    }
}
    • 1

relate perguntas