我正在尝试通过方法 callToggleSidebarOnToggleSidebarBtn() 从 HeaderComponent 调用 SidebarComponent 的方法 toggleSidebar() 但我收到一些我不明白的错误。如何使用另一个组件的方法?
我在 HeaderComponent 中导入 SidebarComponent;在 HeaderComponent 中,我在构造函数中添加 SidebarComponent 以使用她的方法之一。我试图删除 header.component.ts 的方法 callToggleSidebarOnToggleSidebarBtn() 但我得到了相同的输出。
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)