1

tengo 2 componentes que se pintan a la vez

componente 1 html

<p>hola</p>
<button (click)="despedir()">Despedida</button>

componente 2 html con variable mostrar a false

<div *ngIf="mostrar">
<p>Adios</p>
</div>

y en el componente 1 en la funcion despedir cambio mostrar a true, pero no soy capaz de que reciba el cambio el componente 2

9
  • Cuál es la relación entre componente 1 y 2, ¿cómo están conectados?
    – ArianJM
    Commented el 20 ene. 2021 a las 10:37
  • ninguna solo con un servicio, es una pagina dnd se pintan los 2 componentes y lo k kiero es k se muestre el componente 2 cuando pulso el boton del componente 1
    – Kargate
    Commented el 20 ene. 2021 a las 10:39
  • ¿Pero estás seguro de que cuando llamas a despedir estás cambiando la variable mostrar del componente 2? Porque a simple vista, sin más detalles, diría que lo que estás haciendo es cambiar una variable mostrar del mismo componente 1. Probablemente deberías hacerlo a través del servicio. O si no, buscar otro método para guardar el estado de la aplicación
    – ArianJM
    Commented el 20 ene. 2021 a las 11:34
  • en el servicio tengo una variable mostrar inicializada a false y en los ngOnInit de ambos componentes obtengo el valor de esa variable con una funcion del servicio (false para ambos componente), y cuando doy al boton del componente 1 cambio la variable del servicio a true, pro no me lo detecta el componente 2 para mostrarme su mensaje
    – Kargate
    Commented el 20 ene. 2021 a las 11:51
  • 1
    @Kargate creo también que puedes utilizar un ViewChild en adición a la respuesta True Alex Cv me corrigen si se pueda hacer!
    – ger
    Commented el 20 ene. 2021 a las 12:46

3 respuestas 3

0

Para ello te recomiendo que uses los @Input y @Output de Angular:

En el componente 2:

@Input() mostrar2: boolean;

En la etiqueta que cargas el componente 2 le pasas la variable mostrar del componente 1:

<componente2 [mostrar2]="mostrar"></componente2>
7
  • lo he probado pro ocurre lo mismo, no me detecta el cambio
    – Kargate
    Commented el 20 ene. 2021 a las 12:55
  • He leido tu otra respuesta, debes tener algun error con los servicios. Lo mejor es que la función despedida cambie una variable mostrar de dicho componente a true. @Kargate
    – TrueAlexCv
    Commented el 20 ene. 2021 a las 13:11
  • pro si cambio una variable del mismo componente a true no influye en el componente 2 para k se muestre
    – Kargate
    Commented el 20 ene. 2021 a las 16:14
  • @Kargate Para eso están los inputs, al cambiar la variable de ese componente a true, el otro componente recibe el valor true de dicha variable y se le asigna a la suya
    – TrueAlexCv
    Commented el 20 ene. 2021 a las 16:16
  • @Kargate Prueba con lo que te he dicho sin usar servicios. Si quieres hacerlo con servicios tienes que usar Observable
    – TrueAlexCv
    Commented el 20 ene. 2021 a las 16:17
0

tengo esta pagina

<componente1></componente1>
<componente2></componente2>

la componente1 es

<p>hola</p>
<button (click)="despedir()">Despedida</button>

componente 2 html con variable mostrar a false

<div *ngIf="mostrar">
<p>Adios</p>
</div>

typescrypt componente 1

ngOnInit(): void {
   
}
despedir(){
 this.servicio.setMostrar(false);
}

typescrypt componente 2

mostrar = this.service.getMostrar();
ngOnInit(): void {
}

servicio

mostrar = false;
getMostrar(): boolean{
return this.mostrar;
}
setMostrar(dato){
this.mostrar=dato;
}

las paginas es lo primero k se pinta x lo k se inicializa el mostrar a false, pro cuando le doy al boton del componente 1 no me detecta k ha cambiado el valor en el componente 2

1
  • Hola @Kargate esto lo debes colocar en tu pregunta inicial, no debe estar como respuesta
    – ger
    Commented el 20 ene. 2021 a las 13:04
0

Intenta con mobx,

import { makeObservable, action, observable }   from 'mobx'

    constructor () {
            makeObservable(this, {
                variable_que_quieres_observar: observable,
                           .....
    funcion_que_modifica_tu_variable: action,
                
            })
        } 

Y por ultimo observas a tu componente

observer(App);
1
  • no entiendon esta forma k es observer(App) y no me pilla el mobx
    – Kargate
    Commented el 20 ene. 2021 a las 15:27

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.