Невозможно выполнить метод компонента из другого в угловом 7

Я пытаюсь вызвать метод toggleSidebar() SidebarComponent из HeaderComponent через метод callToggleSidebarOnToggleSidebarBtn(), но я получаю ошибку, которую я не понимаю. Как использовать метод компонента из другого?

Я импортирую SidebarComponent в HeaderComponent; В HeaderComponent я добавляю SidebarComponent в конструктор, чтобы использовать один из ее методов. Я попытался удалить метод callToggleSidebarOnToggleSidebarBtn() из header.component.ts, но получаю тот же вывод.

sidebar.component.html:

<div id="sidebar" class="bg-gray">
<a href="" class="nav-link"><i class="fa fa-calendar"></i> Event</a>
<a href="" class="nav-link"><i class="fa fa-user-circle-o"></i> Profile</a>
<a href="" class="nav-link"><i class="fa fa-commenting-o"></i> Chat</a>
<a href="" class="nav-link"><i class="fa fa-gear"></i> Setting</a>
<a href="" class="nav-link"><i class="fa fa-question-circle-o"></i> Help</a>
<a href="" class="nav-link"><i class="fa fa-sign-out"></i> Log out</a>

sidebar.component.ts:

import { Component, OnInit } from '@angular/core';
import * as $ from 'jquery';

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.css']
})
export class SidebarComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  // Display the sidebar if it's not visible and otherwise if else.
  toggleSidebar() {

    $("#sidebar").animate({width: 'toggle'});
  }
}

header.component.html:

<div>
  <nav class="navbar navbar-expand-lg d-flex justify-content-between fixed-top">
    <button class="btn" (click)="callToggleSidebarOnToggleSidebarBtn()"><i class="fa fa-reorder"></i></button>
    <div class="d-flex p-0 m-0">
      <a href="#" class="nav-link d-none d-lg-block">Event</a>
      <a href="#" class="nav-link d-none d-lg-block">Contact Us</a>
      <a href="#" class="nav-link d-none d-lg-block">About Us</a>
      <a href="#" class="nav-link d-none d-lg-block"><i class="fa fa-user-circle"></i></a>
    </div>
    <div class="d-flex">
      <a href="#" class="nav-link"><i class="fa fa-bell"></i></a>
      <a href="#" class="nav-link"><i class="fa fa-globe"></i></a>
    </div>
  </nav>
  <div class="d-sm-flex align-items-center justify-content-between" id="secondMenu">
    <div id="logoContainer">
      <img src="../assets/images/logo.png" alt="" id="logo">
    </div>
    <div class="input-group">
      <div class="input-group-prepend">
        <button class="input-group-text btn dropdown-toggle" data-toggle="dropdown">Meeting</button>
        <div class="dropdown-menu">
          <a class="dropdown-item" class="dropdown-item">Action</a>
          <a class="dropdown-item" class="dropdown-item">Another action</a>
          <a class="dropdown-item" class="dropdown-item">Something else here</a>
        </div>
      </div>
      <input type="text" class="form-control" placeholder="What are you looking for ?" aria-label="Search">
      <div class="input-group-append">
        <button class="btn" type="submit"><i class="fa fa-search"></i></button>
      </div>
    </div>
  </div>
<div>

header.component.ts:

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

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {

  constructor(private sidebarComponent : SidebarComponent) { }

  ngOnInit() {
  }

  callToggleSidebarOnToggleSidebarBtn() {

    this.sidebarComponent.toggleSidebar();
  }
}

Я ожидал, что смогу переключать содержимое sidebar.component.html, нажав на кнопку, которая находится в верхнем левом углу заголовка, но на самом деле вывод:

ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule) 
[HeaderComponent -> SidebarComponent]: 
  StaticInjectorError(Platform: core)[HeaderComponent -> SidebarComponent]: 
    NullInjectorError: No provider for SidebarComponent!
Error: StaticInjectorError(AppModule)[HeaderComponent -> SidebarComponent]: 
  StaticInjectorError(Platform: core)[HeaderComponent -> SidebarComponent]: 
    NullInjectorError: No provider for SidebarComponent!
    at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:3228)
at resolveToken (core.js:3473)
at tryResolveToken (core.js:3417)
at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:3314)
at resolveToken (core.js:3473)
at tryResolveToken (core.js:3417)
at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:3314)
at resolveNgModuleDep (core.js:19784)
at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:20473)
at resolveDep (core.js:20844)
at resolvePromise (zone.js:831)
at resolvePromise (zone.js:788)
at zone.js:892
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
at Object.onInvokeTask (core.js:16147)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
at drainMicroTaskQueue (zone.js:601)
Источник

4 ответа

Решение

Компоненты не являются зависимостями, их нельзя внедрять.

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

<app-sidebar #sidebarReference></app-sidebar>

Теперь вы можете использовать его в своем шаблоне:

<button (click)="sidebarReference.toggleSidebar()">...</button>

Или в вашем компоненте:

@ViewChild(SidebarComponent) sidebar: SidebarComponent;
// or, if several sidebars are in the template,
@ViewChild('sidebarReference') sidebar: SidebarComponent;
this.sidebar.toggleSidebar();
Источник

Чтобы решить эту проблему, я сначала удалил импорт боковой панели в header.component.ts и конструктор. Это мой последний header.component.ts:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }
}

Вы можете увидеть все изменения, которые я сделал.

Затем я добавляю следующий код в заголовок для ссылки на SidebarComponent:

<app-sidebar #sidebarReference></app-sidebar>

Теперь вы можете использовать его в своем шаблоне в header.component.ts

<button class="btn" (click)="sidebarReference.toggleSidebar()"><i class="fa fa-reorder"></i></button>
Источник

Вместо создания экземпляра компонента боковой панели в компоненте Header создайте службу, а именно: appService.ts используя следующую команду,

ng generate service app

В этом сервисе напишите код ниже

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

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

  flagChange:Subject<boolean> = new Subject<boolean>();

  constructor() { }

  setFlag(flagValue){
    this.flagChange.next(flagValue);
  }
}

Тогда в нашем header.component.ts внедрить этот экземпляр службы как

import { Component, OnInit } from '@angular/core';
import { AppService } from './app.service';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {

   flag:boolean = false;

  constructor(private appService :  AppService) { }

  ngOnInit() {
  }

  callToggleSidebarOnToggleSidebarBtn() {

    this.appService.setFlag(!this.flag);
  }
}

Тогда в нашем sidebar.component.ts, обновите код, как показано ниже,

import { Component, OnInit } from '@angular/core';
import * as $ from 'jquery';
import { AppService } from './app.service';

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.css']
})
export class SidebarComponent implements OnInit {

  constructor(private appService: AppService) { }

  ngOnInit() {
   this.appService.flagChange.subscribe((flag) => {
      $("#sidebar").animate({width: 'toggle'});
    })
  }
}

Поэтому, когда пользователь нажимает на значок, значение флага в компоненте заголовка переключается, это изменение регистрируется / передается переменной flagChange в AppService с помощью функции next(), и это изменение наблюдается с помощью метода подписки в компоненте боковой панели.

Источник

AFAIK, вы не можете внедрить компонент в другой компонент. Если вы хотите межкомпонентную связь, вы можете: 1. Использовать сервис 2. Или использовать конструкцию @Input или @Output в зависимости от взаимосвязи между компонентами.

Источник
Другие вопросы по тегам