Este es mi componente principal y quiero pasar datos como encabezados distintos (que es un mensaje aquí) a cada uno de sus componentes secundarios. ¿¿Cómo puedo hacer eso??
Padre:
<div class="container"> <div class="row"> <div> <h1 class="title">Whatever</h1> <p class="subtitle">Nothing.</p> </div> <div class="col-sm-12"> <div class="cardContainer"> <app-cards [message]=message></app-cards> <app-cards [message]=message></app-cards> <app-cards [message]=message></app-cards> <app-cards [message]=message></app-cards> </div> </div> </div> </div>Niño:
<div class="card"> <div class="bg-text"> <div class="title">{{message}}</div> <h6>Obviously, you are important</h6> <div class="cardButtons"> <a href="" class="link link1">Health</a> <a href="" class="link link2">Travel</a> <a href="" class="link link3">Accident</a> </div> </div> </div>Puede ser que la siguiente solución te ayude :)
Plantilla principal:
<div> <app-child [message]="messageFromParent"></app-child> </div>Componente principal:
@Component({ selector: 'app-parent', templateUrl: './parent.component.html', styleUrls: ['./parent.component.css'] }) export class ParentComponent implements OnInit { messageFromParent : string; constructor() { } ngOnInit() { this.messageFromParent = "Hellow world!"; } }ChildTemplate:
<div> {{message}} </div>Componente secundario:
@Component({ selector: 'app-child', templateUrl: './child.component.html', styleUrls: ['./child.component.css'] }) export class ChildComponent implements OnInit { @Input() message: string; constructor() { } ngOnInit() { } }Establecer mensaje como entrada en Child.component
@Component({ selector: 'app-cards', templateUrl: './child.component.html' }) export class Childcomponent implements OnInit{ @Input() message : any; constructor() { } ngOnInit() { console.log(this.message ); } }Padre.componente.ts
@Component({ selector: 'app-parent', templateUrl: './parent.component.html', styleUrls: ['./parent.component.css'] }) export class ParentComponent implements OnInit { message : string; // Message From parent constructor() { } ngOnInit() { this.message = "TEST CASE"; // Message From parent } }Padre.componente.html
<div class="col-sm-12"> <div class="cardContainer"> // {{message}} from Parent will send as @Input message of Child <app-cards [message]={{message}}></app-cards> </div> </div>Recibirá datos sobre la parte principal. Para obtener más detalles, puede consultar estos enlaces: https://angular.io/guide/inputs-outputs y https://www.tektutorialshub.com/angular/angular-passing-data-child-component/