1
votes

Part de fonction dans le composant d'en-tête et de barre latérale angulaire 6

J'ai besoin de la fonction de composant de la barre latérale dans la barre latérale.

mon composant d'en-tête

testFunction() {
   console.log('value');
}

composant de la barre latérale

import { Component, OnInit, Input,ViewChild } from '@angular/core';
import { SidebarComponent } from '../sidebar/sidebar.component';

@ViewChild(SidebarComponent) SidebarComponent;


ngOnInit() {
  this.SidebarComponent.testFunction();
}

J'ai ajouté un bloc de code essentiel à des fins de compréhension. lorsque j'utilise l'erreur de code ci-dessus, dit,

ERROR TypeError: Impossible de lire la propriété 'testFunction' de undefined à HeaderComponent.push ../ src / app / layout / components / header / header.component.ts.HeaderComponent.ngOnInit (header.component.ts: 57)

pouvez-vous m'aider à résoudre ce problème?

javascript angular angular-components

0 commentaires

3 Réponses :

1
votes

appelez-le après l'initialisation de la vue enfant.

  @ViewChild(SidebarComponent) sidebarComponent: SidebarComponent;

  ngAfterViewInit() {
     this.sidebarComponent.testFunction(); 
  }

0 commentaires

1
votes

Pour le partage de fonctions dans Angular, il est préférable d'utiliser un service et d'appeler ses fonctions dans les deux composants.

import { SharedService } from '../shared.service';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: '.....',
  templateUrl: '.......',
  styleUrls: ['........']
})

export class Component2  implements OnInit{

  constructor(private sharedService: SharedService) { }

  ngOnInit() {
   this.sharedService.sharedFunction();
  }

}

Et dans les deux composants, component1:

import { SharedService } from '../shared.service';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: '.....',
  templateUrl: '.......',
  styleUrls: ['........']
})
export class Component1  implements OnInit{

  constructor(private sharedService: SharedService) { }

  ngOnInit() {
   this.sharedService.sharedFunction();
  }

}

composant2:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class SharedService {

  constructor() { }

  sharedFunction(){
    console.log('here');
  }

}

1 commentaires

ne pouvons-nous pas partager la fonction sans utiliser le service ??

0
votes

Peut être fait en utilisant un service. À des fins d'illustration, appelons-le HeaderAndSidebarService:

Nom de fichier: header-and-sidebar.service.ts

import { Component, OnInit, Input,ViewChild } from '@angular/core';
import { HeaderAndSideBarService } from "./header-and-sidebar.service";

@Component({
    ...,
    providers: [HeaderAndSideBarService]
})
export class HeaderComponent {
    constructor(private service: HeaderAndSideBarService ) { }

    ngOnInit() {
      this.service.testFunction();
    }
}

Pour utiliser le service, fournissez-le à la fois dans l'en-tête et le composant de la barre latérale :

@import { Injectable } from "@angular/core";

@Injectable()
export class HeaderAndSideBarService {
    public testFunction() {
       console.log('value');
    }
}

2 commentaires

ne pouvons-nous pas partager la fonction sans utiliser le service ??

@gihankumara Il existe un autre moyen possible, de définir une fonction comme une fonction utilitaire qui n'est pas membre d'une classe: export function testFunction () {...}