Presta atención ya que en esta noticia encontrarás la contestación que buscas.Esta sección fue aprobado por nuestros expertos para garantizar la calidad y veracidad de nuestro contenido.
class
Clase base que proporciona la funcionalidad de detección de cambios. Un árbol de detección de cambios recopila todas las vistas que deben comprobarse para detectar cambios. Utilice los métodos para agregar y eliminar vistas del árbol, iniciar la detección de cambios y marcar explícitamente las vistas como sucio, lo que significa que han cambiado y deben volver a renderizarse.
abstractclassChangeDetectorRefabstractmarkForCheck():voidabstractdetach():voidabstractdetectChanges():voidabstractcheckNoChanges():voidabstractreattach():void
Subclases
Ver también
-
Usar ganchos de detección de cambios
-
Definición de detección de cambios personalizada
Métodos
| markForCheck () |
|---|
|
Cuando una vista usa la estrategia de detección de cambios OnPush (checkOnce), marca explícitamente la vista como cambiada para que pueda verificarse nuevamente. |
|
|
Los componentes normalmente se marcan como sucios (deben volver a renderizarse) cuando las entradas han cambiado o los eventos se han disparado en la vista. Llame a este método para asegurarse de que un componente esté verificado incluso si estos desencadenantes no se han producido. |
| despegar() |
|---|
|
Separa esta vista del árbol de detección de cambios. Una vista separada no se comprueba hasta que se vuelve a adjuntar. Usar en combinación con |
|
|
Las vistas separadas no se comprueban durante las ejecuciones de detección de cambios hasta que se vuelven a adjuntar, incluso si están marcadas como sucias. |
| detectChanges () |
|---|
|
Comprueba esta vista y sus hijos. Úselo en combinación con desconectar para implementar comprobaciones de detección de cambios locales. |
|
| checkNoChanges () |
|---|
|
Comprueba el detector de cambios y sus hijos, y lanza si se detectan cambios. |
|
|
Usar en modo de desarrollo para verificar que la detección de cambios en ejecución no introduce otros cambios. |
| volver a adjuntar () |
|---|
|
Vuelve a adjuntar la vista previamente separada al árbol de detección de cambios. Las vistas se adjuntan al árbol de forma predeterminada. |
|
Notas de uso
Los siguientes ejemplos demuestran cómo modificar el comportamiento de detección de cambios predeterminado para realizar una detección explícita cuando sea necesario.
Usar markForCheck() con CheckOnce estrategia
El siguiente ejemplo establece el OnPush estrategia de detección de cambios para un componente (CheckOnce, en lugar del predeterminado CheckAlways), luego fuerza una segunda verificación después de un intervalo. Ver demo en vivo.
@Component( selector:'my-app', template:`Number of ticks: numberOfTicks`, changeDetection: ChangeDetectionStrategy.OnPush,)classAppComponent numberOfTicks =0;constructor(private ref: ChangeDetectorRef)setInterval(()=>this.numberOfTicks++;// require view to be updatedthis.ref.markForCheck();,1000);
Separe el detector de cambio para limitar la frecuencia con la que se realiza la verificación
El siguiente ejemplo define un componente con una gran lista de datos de solo lectura que se espera que cambie constantemente, muchas veces por segundo. Para mejorar el rendimiento, queremos verificar y actualizar la lista con menos frecuencia de la que realmente ocurren los cambios. Para hacer eso, separamos el detector de cambio de componente y realizamos una verificación local explícita cada cinco segundos.
classDataListProvider// in a real application the returned data will be different every timegetdata()return[1,2,3,4,5];@Component( selector:'giant-list', template:`Data d `,)classGiantListconstructor(private ref: ChangeDetectorRef,public dataProvider: DataListProvider) ref.detach();setInterval(()=>this.ref.detectChanges();,5000);@Component( selector:'app', providers:[DataListProvider], template:``,)classApp
Volver a unir un componente separado
El siguiente ejemplo crea un componente que muestra datos en vivo. El componente separa su detector de cambios del árbol principal de detectores de cambios cuando el live la propiedad está establecida en falsey lo vuelve a unir cuando la propiedad se convierte en true.
classDataProvider data =1;constructor()setInterval(()=>this.data =2;,500);@Component(selector:'live-data', inputs:['live'], template:'Data: dataProvider.data')classLiveDataconstructor(private ref: ChangeDetectorRef,public dataProvider: DataProvider)@Input()setlive(value:boolean)if(value)this.ref.reattach();elsethis.ref.detach();@Component( selector:'app', providers:[DataProvider], template:` Live Update:`,)classApp1 live =true;