Question

我想用“ takeUntil”运算符以声明方式退订。但这基本上是行不通的。我仍然可以看到控制台输出。

<div class="dataTables_scrollBody ps-container ps-theme-default ps-active-x" data-ps-id="77fa0bd8-5ef4-1c4e-e67a-a8675b515900" style="position: relative; overflow: auto; width: 100%; height: 762px;">
    <table id="contenido-table" class="table table-condensed table-striped dataTable no-footer" role="grid" aria-describedby="contenido-table_info" style="width: 2072px;">
        <thead>
            <tr role="row" style="height: 0px;">
                <th class="text-center sorting" aria-controls="contenido-table" rowspan="1" colspan="1" style="width: 112px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="ICAO Aerolinea: Activar para ordenar la columna de manera ascendente">
                    <div class="dataTables_sizing" style="height: 0px; overflow: hidden;">ICAO Aerolinea</div>
                </th>
                <th class="text-center sorting" aria-controls="contenido-table" rowspan="1" colspan="1" style="width: 43px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Vuelo: Activar para ordenar la columna de manera ascendente">
                    <div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Vuelo</div>
                </th>
                <th class="text-center editable sorting" aria-controls="contenido-table" rowspan="1" colspan="1" style="width: 43px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Sufijo: Activar para ordenar la columna de manera ascendente">
                    <div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Sufijo</div>
                </th>
                <th class="text-center sorting" aria-controls="contenido-table" rowspan="1" colspan="1" style="width: 71px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Matricula: Activar para ordenar la columna de manera ascendente">
                    <div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Matricula</div>
                </th>
                <th class="text-center sorting" aria-controls="contenido-table" rowspan="1" colspan="1" style="width: 33px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Tipo: Activar para ordenar la columna de manera ascendente">
                    <div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Tipo</div>
                </th>
                <th class="text-center sorting" aria-controls="contenido-table" rowspan="1" colspan="1" style="width: 72px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Aeronave: Activar para ordenar la columna de manera ascendente">
                    <div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Aeronave</div>
                </th>
                <th class="text-center sorting" aria-controls="contenido-table" rowspan="1" colspan="1" style="width: 72px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Categoria: Activar para ordenar la columna de manera ascendente">
                    <div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Categoria</div>
                </th>
                <th class="text-center sorting" aria-controls="contenido-table" rowspan="1" colspan="1" style="width: 52px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Origen: Activar para ordenar la columna de manera ascendente">
                    <div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Origen</div>
                </th>
                <th class="text-center sorting" aria-controls="contenido-table" rowspan="1" colspan="1" style="width: 96px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Escala Previa: Activar para ordenar la columna de manera ascendente">
                    <div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Escala Previa</div>
                </th>
                <th class="text-center sorting" aria-controls="contenido-table" rowspan="1" colspan="1" style="width: 96px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Estado Vuelo: Activar para ordenar la columna de manera ascendente">
                    <div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Estado Vuelo</div>
                </th>
                <th class="text-center sorting" aria-controls="contenido-table" rowspan="1" colspan="1" style="width: 139px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Fecha Programada: Activar para ordenar la columna de manera ascendente">
                    <div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Fecha Programada</div>
                </th>
                <th class="text-center sorting" aria-controls="contenido-table" rowspan="1" colspan="1" style="width: 116px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Fecha Estimada: Activar para ordenar la columna de manera ascendente">
                    <div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Fecha Estimada</div>
                </th>
                <th class="text-center sorting" aria-controls="contenido-table" rowspan="1" colspan="1" style="width: 93px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Fecha Actual: Activar para ordenar la columna de manera ascendente">
                    <div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Fecha Actual</div>
                </th>
                <th class="text-center sorting" aria-controls="contenido-table" rowspan="1" colspan="1" style="width: 58px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Servicio: Activar para ordenar la columna de manera ascendente">
                    <div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Servicio</div>
                </th>
                <th class="text-center sorting" aria-controls="contenido-table" rowspan="1" colspan="1" style="width: 44px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Stand: Activar para ordenar la columna de manera ascendente">
                    <div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Stand</div>
                </th>
                <th class="text-center sorting" aria-controls="contenido-table" rowspan="1" colspan="1" style="width: 47px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Cintas: Activar para ordenar la columna de manera ascendente">
                    <div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Cintas</div>
                </th>
                <th class="text-center sorting" aria-controls="contenido-table" rowspan="1" colspan="1" style="width: 91px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Inicio Cintas: Activar para ordenar la columna de manera ascendente">
                    <div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Inicio Cintas</div>
                </th>
                <th class="text-center sorting" aria-controls="contenido-table" rowspan="1" colspan="1" style="width: 73px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Fin Cintas: Activar para ordenar la columna de manera ascendente">
                    <div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Fin Cintas</div>
                </th>
                <th class="text-center sorting" aria-controls="contenido-table" rowspan="1" colspan="1" style="width: 115px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Primera Maleta: Activar para ordenar la columna de manera ascendente">
                    <div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Primera Maleta</div>
                </th>
                <th class="text-center sorting" aria-controls="contenido-table" rowspan="1" colspan="1" style="width: 107px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Ultima Maleta: Activar para ordenar la columna de manera ascendente">
                    <div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Ultima Maleta</div>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr role="row" class="odd">
                <td class=" text-center" name="ICAO Aerolinea">DRA</td>
                <td class=" text-center" name="Vuelo">5485</td>
                <td class=" text-center editable" name="Sufijo"></td>
                <td class=" text-center" name="Matricula" style="display: table-cell;text-overflow: ellipsis;overflow: hidden;max-width: 195px;">GBC001</td>
                <td class=" text-center" name="Tipo" style="display: table-cell;text-overflow: ellipsis;overflow: hidden;max-width: 195px;">NA</td>
                <td class=" text-center" name="Aeronave">A001</td>
                <td class=" text-center" name="Categoria">C</td>
                <td class=" text-center" name="Origen">LEBB</td>
                <td class=" text-center" name="Escala Previa" style="display: table-cell;text-overflow: ellipsis;overflow: hidden;max-width: 195px;"></td>
                <td class=" text-center" name="Estado Vuelo">SCH</td>
                <td class=" text-center" name="Fecha Programada" style="min-width: 97px">03/10/2018</td>
                <td class=" text-center" name="Fecha Estimada"></td>
                <td class=" text-center" name="Fecha Actual"></td>
                <td class=" text-center" name="Servicio">A</td>
                <td class=" text-center" name="Stand"></td>
                <td class=" text-center" name="Cintas"></td>
                <td class=" text-center" name="Inicio Cintas"></td>
                <td class=" text-center" name="Fin Cintas"></td>
                <td class=" text-center" name="Primera Maleta"></td>
                <td class=" text-center" name="Ultima Maleta"></td>
            </tr>
            <tr role="row" class="even">
                <td class=" text-center" name="ICAO Aerolinea">AAA</td>
                <td class=" text-center" name="Vuelo">1234</td>
                <td class=" text-center editable" name="Sufijo"></td>
                <td class=" text-center" name="Matricula" style="display: table-cell;text-overflow: ellipsis;overflow: hidden;max-width: 195px;">GBC001</td>
                <td class=" text-center" name="Tipo" style="display: table-cell;text-overflow: ellipsis;overflow: hidden;max-width: 195px;">NA</td>
                <td class=" text-center" name="Aeronave">A001</td>
                <td class=" text-center" name="Categoria">C</td>
                <td class=" text-center" name="Origen">LEBB</td>
                <td class=" text-center" name="Escala Previa" style="display: table-cell;text-overflow: ellipsis;overflow: hidden;max-width: 195px;"></td>
                <td class=" text-center" name="Estado Vuelo">SCH</td>
                <td class=" text-center" name="Fecha Programada" style="min-width: 97px">03/10/2018</td>
                <td class=" text-center" name="Fecha Estimada"></td>
                <td class=" text-center" name="Fecha Actual"></td>
                <td class=" text-center" name="Servicio">A</td>
                <td class=" text-center" name="Stand"></td>
                <td class=" text-center" name="Cintas"></td>
                <td class=" text-center" name="Inicio Cintas"></td>
                <td class=" text-center" name="Fin Cintas"></td>
                <td class=" text-center" name="Primera Maleta"></td>
                <td class=" text-center" name="Ultima Maleta"></td>
            </tr>
        </tbody>
    </table>
    <div class="ps-scrollbar-x-rail" style="width: 2063px; left: 0px; bottom: 3px;">
        <div class="ps-scrollbar-x" tabindex="0" style="left: 0px; width: 2055px;"></div>
    </div>
    <div class="ps-scrollbar-y-rail" style="top: 0px; right: 3px;">
        <div class="ps-scrollbar-y" tabindex="0" style="top: 0px; height: 0px;"></div>
    </div>
</div>

StaackBlitz：

https://stackblitz.com/edit/rxjs-svfkxg?file=index.ts

PS 。我希望甚至const unsubscribe = new Subject(); function printFoo() { of('foo') .pipe(takeUntil(unsubscribe)) .subscribe(console.log) // Why I can see 'foo' in the console? } function onDestroy() { unsubscribe.next(); unsubscribe.complete(); } onDestroy() setTimeout(() => printFoo(), 200)都可以取消订阅，但即使使用unsubscribe.next()也无法订阅。

Answer 1

您甚至在创建带有onDestroy()的链之前就调用takeUntil。

当您最终致电printFoo()时，不会再次排放到unsubscribe的先前排放物，并且主题unsubscribe已经完成，因此takeUntil在这种情况下将永远不会完成链条。

Answer 2

因为主题在printFoo订阅之前发出。

订阅后，不再发射主题。

您可以改用BehaviorSubject，因为它保存了发出的值（最后一个发射值）：

const unsubscribe = new BehaviorSubject(false);

function printFoo() {
  of('foo')
    .pipe(takeUntil(unsubscribe.pipe(filter(value => !!value)))) // Don't unsub if it's false emitted
    .subscribe(console.log)
}

function onDestroy() {
  unsubscribe2.next(true); // Emit true to cancel subscription
}

RxJS takeUntil不会退订

2 个答案: