доля функции в заголовке и боковой панели компонента угловой 6

Question

Мне нужно, чтобы компонент боковой панели работал в боковой панели.

мой компонент заголовка

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

@ViewChild(SidebarComponent) SidebarComponent;


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

компонент боковой панели

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

Я добавил необходимый блок кода для понимания.когда я использую приведенный выше код ошибки, сказано:

ОШИБКА TypeError: Невозможно прочитать свойство 'testFunction' из неопределенного в HeaderComponent.push ../src / app / layout / components / header / header.component.ts.HeaderComponent.ngOnInit (header.component.ts: 57)

Можете ли вы помочь мне решить эту проблему?

Answer 1

Для совместного использования функций в Angular лучше использовать сервис и вызывать его функции в обоих компонентах.

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

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

  constructor() { }

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

}

И в обоих компонентах, компонент1:

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();
  }

}

component2:

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();
  }

}

Answer 2

вызовите его после инициализации дочернего представления.

  @ViewChild(SidebarComponent) sidebarComponent: SidebarComponent;

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

Answer 3

Может быть сделано с помощью службы. Для иллюстрации давайте назовем его HeaderAndSidebarService:

Имя файла: header-and-sidebar.service.ts

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

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

Чтобы использовать службу, предоставьте ее как в заголовке, так и в боковой панели:

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();
    }
}