Olá, Clara, como vai?

A comunicação entre o arquivo negociacoes-view.ts e o arquivo index.html ocorre por meio do seletor CSS passado como argumento no construtor da classe NegociacoesView. No negociacao-controller.ts, há uma instância da classe NegociacoesView:

private negociacoesView = new NegociacoesView('#negociacoesView', true);

O primeiro argumento '#negociacoesView' é o seletor CSS usado pelo método document.querySelector dentro da classe View, que é a classe base da NegociacoesView. Esse seletor faz com que a NegociacoesView encontre no DOM o elemento HTML correspondente (neste caso, um elemento com o ID negociacoesView). Dentro da classe View, que a NegociacoesView estende, temos algo assim:

export abstract class View<T> {

    protected elemento: HTMLElement;
    private escapar = false;

    constructor(seletor: string, escapar?: boolean) {
        const elemento = document.querySelector(seletor);
        if (elemento) {
            this.elemento = elemento as HTMLElement;
        } else {
            throw Error(`Seletor ${seletor} não existe no DOM. Verifique`);
        }
        if (escapar) {
            this.escapar = escapar;
        }
    }

    public update(model: T): void {
        let template = this.template(model);
        if (this.escapar) {
            template = template
                .replace(/<script>[\s\S]*?<\/script>/, '');
        }
        this.elemento.innerHTML = template;
    }

    protected abstract template(model: T): string;
}

Esse código usa o document.querySelector para buscar o elemento no DOM e armazená-lo na propriedade elemento. Assim, a instância da NegociacoesView pode manipular diretamente o conteúdo desse elemento, por exemplo, atualizando seu innerHTML no método update.

Quando você chama this.negociacoesView.update(this.negociacoes) no NegociacaoController, o método update da NegociacoesView é acionado e usa o this.elemento (que referencia o elemento no DOM) para renderizar a tabela dentro do elemento HTML correspondente.

Espero ter ajudado!

Siga firme nos seus estudos e conte com o fórum sempre que precisar!

Abraços :)

Quando você chama this.negociacoesView.update(this.negociacoes) no NegociacaoController, o método update da NegociacoesView é acionado e usa o this.elemento (que referencia o elemento no DOM) para renderizar a tabela dentro do elemento HTML correspondente.

Pronto! Era só isso que eu queria saber.

Muito obrigada, Mike! <3