I have an application and I have just implemented the router-outlet to make the page more dynamic, however I can not use @input anymore to receive data between different components.
Example:
Component PAI:
import { Component, OnInit } from '@angular/core';
import { ProdutosService } from '../produtos.service';
@Component({
selector: 'app-vendas-pdv',
templateUrl: './vendas-pdv.component.html',
styleUrls: ['./vendas-pdv.component.css']
})
export class VendasPdvComponent implements OnInit {
constructor( private ProdutosService: ProdutosService ) { }
//Listar Produtos
listar(){ this.ProdutosService.listar(this.dadosLoja).subscribe(dados => this.produtos = dados); }
ngOnInit() {
this.listar();
}
}
Son Component:
import { Component, ViewChild, Input } from '@angular/core';
@Component({
selector: 'app-pdv',
templateUrl: './pdv.component.html',
styleUrls: ['./pdv.component.css']
})
export class PdvComponent {
//IMPORTA PRODUTOS
@Input() produtos;
constructor() { }
}
Parent Template:
<!--
CODIGO ANTIGO FUNCIONANDO
<app-pdv [produtos]="produtos" ></app-pdv>
-->
<!-- NÃO FUNCIONA -->
<router-outlet [produtos]="produtos" ></router-outlet>
Does anyone have a light?